From 10f0c25f74551a62ef54266288627afa5420e57c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gestor=C3=ADa=20LP?= <contacto@gestorialp.com>
Date: Mon, 2 Mar 2026 03:59:45 +0000
Subject: [PATCH] redesign: dark premium theme matching logo identity

Replace navy blue/gold color scheme with dark backgrounds (#0a0a0a, #111, #1a1a1a)
and silver/platinum metallic accents (#c0c0c0, #d4d4d4, #e8e8e8) to match the
LP logo's chrome/silver gradient aesthetic. All sections (navbar, hero, service
cards, values, testimonials, contact, footer, forms, confirmation page) updated
for luxury dark theme with subtle silver glow effects and metallic gradients.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 assets/css/style.css | 371 ++++++++++++++++++++++++-------------------
 includes/header.php  |   3 +
 2 files changed, 215 insertions(+), 159 deletions(-)

diff --git a/assets/css/style.css b/assets/css/style.css
index 17c315c..5e7fe61 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -1,31 +1,37 @@
 /* ============================================================
-   Gestoría LP — Main Stylesheet
+   Gestoria LP -- Main Stylesheet
    Professional immigration services site
-   Color scheme: Navy Blue (#1B3A5C) + Gold (#C9A94E)
+   Color scheme: Dark (#0a0a0a) + Silver/Platinum (#c0c0c0)
+   Premium luxury aesthetic matching logo identity
    ============================================================ */
 
 /* ----- CSS Custom Properties ----- */
 :root {
-    /* Brand colors */
-    --color-primary:        #1B3A5C;
-    --color-primary-dark:   #122841;
-    --color-primary-light:  #2A5580;
-    --color-accent:         #C9A94E;
-    --color-accent-dark:    #B0912F;
-    --color-accent-light:   #D4BC70;
+    /* Brand colors -- Dark & Silver */
+    --color-primary:        #0a0a0a;
+    --color-primary-dark:   #000000;
+    --color-primary-light:  #1a1a1a;
+    --color-accent:         #c0c0c0;
+    --color-accent-dark:    #999999;
+    --color-accent-light:   #e0e0e0;
+
+    /* Metallic gradients */
+    --gradient-silver: linear-gradient(135deg, #b8b8b8 0%, #e8e8e8 25%, #c0c0c0 50%, #d4d4d4 75%, #b0b0b0 100%);
+    --gradient-dark: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #111111 100%);
+    --gradient-hero: linear-gradient(135deg, #000000 0%, #1a1a1a 40%, #0d0d0d 100%);
 
     /* Neutrals */
     --color-white:          #FFFFFF;
-    --color-off-white:      #F8F9FA;
-    --color-gray-100:       #F1F3F5;
-    --color-gray-200:       #E9ECEF;
-    --color-gray-300:       #DEE2E6;
-    --color-gray-400:       #CED4DA;
-    --color-gray-500:       #ADB5BD;
-    --color-gray-600:       #6C757D;
-    --color-gray-700:       #495057;
-    --color-gray-800:       #343A40;
-    --color-gray-900:       #212529;
+    --color-off-white:      #111111;
+    --color-gray-100:       #1a1a1a;
+    --color-gray-200:       #2a2a2a;
+    --color-gray-300:       #3a3a3a;
+    --color-gray-400:       #555555;
+    --color-gray-500:       #777777;
+    --color-gray-600:       #999999;
+    --color-gray-700:       #bbbbbb;
+    --color-gray-800:       #d4d4d4;
+    --color-gray-900:       #e8e8e8;
 
     /* Semantic */
     --color-success:        #28A745;
@@ -59,11 +65,12 @@
     --space-3xl:            4rem;
     --space-4xl:            6rem;
 
-    /* Shadows */
-    --shadow-sm:            0 1px 3px rgba(0, 0, 0, 0.08);
-    --shadow-md:            0 4px 12px rgba(0, 0, 0, 0.1);
-    --shadow-lg:            0 8px 30px rgba(0, 0, 0, 0.12);
-    --shadow-xl:            0 16px 48px rgba(0, 0, 0, 0.15);
+    /* Shadows -- silver glow for dark theme */
+    --shadow-sm:            0 1px 3px rgba(0, 0, 0, 0.3);
+    --shadow-md:            0 4px 12px rgba(0, 0, 0, 0.4);
+    --shadow-lg:            0 8px 30px rgba(0, 0, 0, 0.5);
+    --shadow-xl:            0 16px 48px rgba(0, 0, 0, 0.6);
+    --shadow-silver:        0 0 20px rgba(192, 192, 192, 0.08);
 
     /* Borders */
     --radius-sm:            4px;
@@ -105,7 +112,7 @@ body {
     font-size: var(--font-size-base);
     line-height: var(--line-height-normal);
     color: var(--color-gray-800);
-    background-color: var(--color-white);
+    background-color: var(--color-primary);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     overflow-x: hidden;
@@ -192,51 +199,55 @@ p:last-child {
     transform: translateY(0);
 }
 
+/* Primary button -- silver metallic gradient with dark text */
 .btn--primary {
-    background-color: var(--color-accent);
-    color: var(--color-primary-dark);
-    border-color: var(--color-accent);
+    background: var(--gradient-silver);
+    color: #0a0a0a;
+    border-color: rgba(192, 192, 192, 0.3);
 }
 
 .btn--primary:hover {
-    background-color: var(--color-accent-dark);
-    border-color: var(--color-accent-dark);
-    box-shadow: var(--shadow-md);
+    background: linear-gradient(135deg, #c8c8c8 0%, #f0f0f0 25%, #d0d0d0 50%, #e0e0e0 75%, #c0c0c0 100%);
+    border-color: rgba(192, 192, 192, 0.5);
+    box-shadow: 0 4px 20px rgba(192, 192, 192, 0.2);
 }
 
+/* Secondary button -- dark with silver border */
 .btn--secondary {
-    background-color: var(--color-primary);
-    color: var(--color-white);
-    border-color: var(--color-primary);
+    background-color: var(--color-primary-light);
+    color: var(--color-accent-light);
+    border-color: var(--color-accent-dark);
 }
 
 .btn--secondary:hover {
-    background-color: var(--color-primary-dark);
-    border-color: var(--color-primary-dark);
-    box-shadow: var(--shadow-md);
+    background-color: var(--color-accent);
+    color: var(--color-primary);
+    border-color: var(--color-accent);
+    box-shadow: 0 4px 20px rgba(192, 192, 192, 0.15);
 }
 
+/* Outline button -- silver border, silver text */
 .btn--outline {
     background-color: transparent;
-    color: var(--color-white);
-    border-color: var(--color-white);
+    color: var(--color-accent-light);
+    border-color: var(--color-accent);
 }
 
 .btn--outline:hover {
-    background-color: var(--color-white);
+    background: var(--gradient-silver);
     color: var(--color-primary);
-    box-shadow: var(--shadow-md);
+    box-shadow: 0 4px 20px rgba(192, 192, 192, 0.2);
 }
 
 .btn--outline-primary {
     background-color: transparent;
-    color: var(--color-primary);
-    border-color: var(--color-primary);
+    color: var(--color-accent);
+    border-color: var(--color-accent);
 }
 
 .btn--outline-primary:hover {
-    background-color: var(--color-primary);
-    color: var(--color-white);
+    background: var(--gradient-silver);
+    color: var(--color-primary);
 }
 
 .btn--sm {
@@ -254,6 +265,7 @@ p:last-child {
     width: 100%;
 }
 
+/* WhatsApp button -- keep green, styled for dark theme */
 .btn--whatsapp {
     background-color: #25D366;
     color: var(--color-white);
@@ -263,6 +275,7 @@ p:last-child {
 .btn--whatsapp:hover {
     background-color: #1DA851;
     border-color: #1DA851;
+    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.25);
 }
 
 /* ============================================================
@@ -274,15 +287,18 @@ p:last-child {
     left: 0;
     width: 100%;
     height: var(--navbar-height);
-    background-color: rgba(255, 255, 255, 0.97);
-    backdrop-filter: blur(10px);
-    -webkit-backdrop-filter: blur(10px);
+    background-color: rgba(10, 10, 10, 0.95);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
     z-index: 1000;
     transition: box-shadow var(--transition-base), background-color var(--transition-base);
+    border-bottom: 1px solid rgba(192, 192, 192, 0.06);
 }
 
 .navbar--scrolled {
-    box-shadow: var(--shadow-md);
+    background-color: rgba(0, 0, 0, 0.98);
+    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
+    border-bottom-color: rgba(192, 192, 192, 0.1);
 }
 
 .navbar__inner {
@@ -297,7 +313,7 @@ p:last-child {
     align-items: center;
     gap: var(--space-sm);
     font-size: var(--font-size-xl);
-    color: var(--color-primary);
+    color: var(--color-accent-light);
     font-weight: 600;
     transition: color var(--transition-fast);
     text-decoration: none;
@@ -310,13 +326,13 @@ p:last-child {
 }
 
 .navbar__logo {
-    height: 40px;
+    height: 55px;
     width: auto;
     border-radius: 4px;
 }
 
 .footer__logo {
-    height: 30px;
+    height: 35px;
     width: auto;
     border-radius: 4px;
     vertical-align: middle;
@@ -330,6 +346,7 @@ p:last-child {
 
 .navbar__brand strong {
     font-weight: 800;
+    color: var(--color-white);
 }
 
 .navbar__list {
@@ -345,15 +362,15 @@ p:last-child {
     padding: 0.5rem 1rem;
     font-size: var(--font-size-sm);
     font-weight: 500;
-    color: var(--color-gray-700);
+    color: var(--color-accent);
     border-radius: var(--radius-md);
     transition: color var(--transition-fast), background-color var(--transition-fast);
     text-decoration: none;
 }
 
 .navbar__link:hover {
-    color: var(--color-primary);
-    background-color: var(--color-gray-100);
+    color: var(--color-white);
+    background-color: rgba(192, 192, 192, 0.08);
 }
 
 .navbar__link--dropdown i {
@@ -371,10 +388,10 @@ p:last-child {
     top: 100%;
     left: 0;
     min-width: 260px;
-    background-color: var(--color-white);
-    border: 1px solid var(--color-gray-200);
+    background-color: #141414;
+    border: 1px solid rgba(192, 192, 192, 0.12);
     border-radius: var(--radius-lg);
-    box-shadow: var(--shadow-lg);
+    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
     opacity: 0;
     visibility: hidden;
     transform: translateY(8px);
@@ -400,15 +417,15 @@ p:last-child {
     gap: var(--space-sm);
     padding: 0.65rem 1rem;
     font-size: var(--font-size-sm);
-    color: var(--color-gray-700);
+    color: var(--color-accent);
     border-radius: var(--radius-md);
     transition: all var(--transition-fast);
     text-decoration: none;
 }
 
 .navbar__dropdown-link:hover {
-    background-color: var(--color-gray-100);
-    color: var(--color-primary);
+    background-color: rgba(192, 192, 192, 0.08);
+    color: var(--color-white);
 }
 
 .navbar__dropdown-link i {
@@ -437,7 +454,7 @@ p:last-child {
     display: block;
     width: 24px;
     height: 2.5px;
-    background-color: var(--color-primary);
+    background-color: var(--color-accent);
     border-radius: 2px;
     transition: all var(--transition-base);
     transform-origin: center;
@@ -466,7 +483,7 @@ p:last-child {
     justify-content: center;
     min-height: 100vh;
     padding: calc(var(--navbar-height) + var(--space-3xl)) var(--space-lg) var(--space-3xl);
-    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 50%, #0E1F30 100%);
+    background: var(--gradient-hero);
     overflow: hidden;
 }
 
@@ -474,8 +491,8 @@ p:last-child {
     position: absolute;
     inset: 0;
     background-image:
-        radial-gradient(ellipse at 20% 80%, rgba(201, 169, 78, 0.12) 0%, transparent 50%),
-        radial-gradient(ellipse at 80% 20%, rgba(201, 169, 78, 0.08) 0%, transparent 50%);
+        radial-gradient(ellipse at 20% 80%, rgba(192, 192, 192, 0.04) 0%, transparent 50%),
+        radial-gradient(ellipse at 80% 20%, rgba(192, 192, 192, 0.03) 0%, transparent 50%);
     pointer-events: none;
 }
 
@@ -484,7 +501,7 @@ p:last-child {
     position: absolute;
     inset: 0;
     background:
-        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Ccircle cx='30' cy='30' r='1.5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.02'%3E%3Ccircle cx='30' cy='30' r='1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
 }
 
 .hero__content {
@@ -505,7 +522,7 @@ p:last-child {
 
 .hero__subtitle {
     font-size: var(--font-size-lg);
-    color: rgba(255, 255, 255, 0.8);
+    color: rgba(192, 192, 192, 0.8);
     margin-bottom: var(--space-2xl);
     line-height: var(--line-height-loose);
     max-width: 620px;
@@ -526,6 +543,7 @@ p:last-child {
    ============================================================ */
 .section {
     padding: var(--space-4xl) 0;
+    background-color: var(--color-primary);
 }
 
 .section:nth-child(even) {
@@ -547,8 +565,9 @@ p:last-child {
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.08em;
-    color: var(--color-accent-dark);
-    background-color: rgba(201, 169, 78, 0.12);
+    color: var(--color-accent-light);
+    background-color: rgba(192, 192, 192, 0.08);
+    border: 1px solid rgba(192, 192, 192, 0.15);
     border-radius: var(--radius-full);
     margin-bottom: var(--space-md);
 }
@@ -556,7 +575,7 @@ p:last-child {
 .section__title {
     font-size: var(--font-size-3xl);
     font-weight: 800;
-    color: var(--color-gray-900);
+    color: var(--color-white);
     margin-bottom: var(--space-md);
     letter-spacing: -0.01em;
 }
@@ -577,8 +596,8 @@ p:last-child {
 }
 
 .card--service {
-    background-color: var(--color-white);
-    border: 1px solid var(--color-gray-200);
+    background-color: #141414;
+    border: 1px solid rgba(192, 192, 192, 0.1);
     border-radius: var(--radius-lg);
     padding: var(--space-2xl) var(--space-xl);
     text-align: center;
@@ -594,7 +613,7 @@ p:last-child {
     left: 0;
     right: 0;
     height: 3px;
-    background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
+    background: var(--gradient-silver);
     transform: scaleX(0);
     transform-origin: left;
     transition: transform var(--transition-base);
@@ -602,8 +621,8 @@ p:last-child {
 
 .card--service:hover {
     transform: translateY(-6px);
-    box-shadow: var(--shadow-lg);
-    border-color: transparent;
+    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), 0 0 20px rgba(192, 192, 192, 0.05);
+    border-color: rgba(192, 192, 192, 0.2);
 }
 
 .card--service:hover::before {
@@ -617,21 +636,24 @@ p:last-child {
     width: 64px;
     height: 64px;
     border-radius: var(--radius-lg);
-    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
-    color: var(--color-white);
+    background: rgba(192, 192, 192, 0.08);
+    border: 1px solid rgba(192, 192, 192, 0.12);
+    color: var(--color-accent);
     font-size: 1.5rem;
     margin-bottom: var(--space-lg);
-    transition: transform var(--transition-base);
+    transition: all var(--transition-base);
 }
 
 .card--service:hover .card__icon {
     transform: scale(1.08);
+    background: rgba(192, 192, 192, 0.12);
+    border-color: rgba(192, 192, 192, 0.2);
 }
 
 .card__title {
     font-size: var(--font-size-lg);
     font-weight: 700;
-    color: var(--color-gray-900);
+    color: var(--color-white);
     margin-bottom: var(--space-sm);
 }
 
@@ -648,13 +670,13 @@ p:last-child {
     gap: 0.4rem;
     font-size: var(--font-size-sm);
     font-weight: 600;
-    color: var(--color-primary);
+    color: var(--color-accent);
     transition: color var(--transition-fast), gap var(--transition-fast);
     text-decoration: none;
 }
 
 .card__link:hover {
-    color: var(--color-accent-dark);
+    color: var(--color-accent-light);
     gap: 0.7rem;
 }
 
@@ -679,23 +701,26 @@ p:last-child {
     width: 72px;
     height: 72px;
     border-radius: 50%;
-    background-color: rgba(201, 169, 78, 0.1);
-    color: var(--color-accent-dark);
+    background-color: rgba(192, 192, 192, 0.06);
+    border: 1px solid rgba(192, 192, 192, 0.12);
+    color: var(--color-accent);
     font-size: 1.6rem;
     margin-bottom: var(--space-lg);
     transition: all var(--transition-base);
 }
 
 .value-card:hover .value-card__icon {
-    background-color: var(--color-accent);
-    color: var(--color-white);
+    background: var(--gradient-silver);
+    color: #0a0a0a;
+    border-color: transparent;
     transform: scale(1.1);
+    box-shadow: 0 0 20px rgba(192, 192, 192, 0.15);
 }
 
 .value-card__title {
     font-size: var(--font-size-md);
     font-weight: 700;
-    color: var(--color-gray-900);
+    color: var(--color-white);
     margin-bottom: var(--space-sm);
 }
 
@@ -709,7 +734,7 @@ p:last-child {
    Testimonials
    ============================================================ */
 .testimonials {
-    background-color: var(--color-off-white);
+    background-color: var(--color-primary);
 }
 
 .testimonials__grid {
@@ -719,8 +744,8 @@ p:last-child {
 }
 
 .testimonial-card {
-    background-color: var(--color-white);
-    border: 1px solid var(--color-gray-200);
+    background-color: #141414;
+    border: 1px solid rgba(192, 192, 192, 0.1);
     border-radius: var(--radius-lg);
     padding: var(--space-2xl);
     transition: all var(--transition-base);
@@ -735,8 +760,8 @@ p:last-child {
 }
 
 .testimonial-card:hover {
-    box-shadow: var(--shadow-md);
-    border-color: var(--color-gray-300);
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 15px rgba(192, 192, 192, 0.04);
+    border-color: rgba(192, 192, 192, 0.18);
 }
 
 .testimonial-card__stars {
@@ -777,15 +802,15 @@ p:last-child {
     width: 40px;
     height: 40px;
     border-radius: 50%;
-    background-color: var(--color-primary);
-    color: var(--color-white);
+    background: var(--gradient-silver);
+    color: #0a0a0a;
     font-size: var(--font-size-sm);
     flex-shrink: 0;
 }
 
 .testimonial-card__name {
     font-weight: 600;
-    color: var(--color-gray-900);
+    color: var(--color-white);
     font-size: var(--font-size-sm);
 }
 
@@ -810,14 +835,16 @@ p:last-child {
     align-items: flex-start;
     gap: var(--space-md);
     padding: var(--space-lg);
-    background-color: var(--color-off-white);
+    background-color: #141414;
+    border: 1px solid rgba(192, 192, 192, 0.08);
     border-radius: var(--radius-lg);
     transition: all var(--transition-base);
 }
 
 .contact__info-card:hover {
-    background-color: var(--color-white);
-    box-shadow: var(--shadow-md);
+    background-color: #1a1a1a;
+    border-color: rgba(192, 192, 192, 0.15);
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
 }
 
 .contact__info-icon {
@@ -827,8 +854,9 @@ p:last-child {
     width: 48px;
     height: 48px;
     border-radius: var(--radius-md);
-    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
-    color: var(--color-white);
+    background: rgba(192, 192, 192, 0.08);
+    border: 1px solid rgba(192, 192, 192, 0.12);
+    color: var(--color-accent);
     font-size: var(--font-size-lg);
     flex-shrink: 0;
 }
@@ -836,7 +864,7 @@ p:last-child {
 .contact__info-card h4 {
     font-size: var(--font-size-sm);
     font-weight: 700;
-    color: var(--color-gray-900);
+    color: var(--color-white);
     margin-bottom: 0.2rem;
 }
 
@@ -849,7 +877,7 @@ p:last-child {
 }
 
 .contact__info-card a:hover {
-    color: var(--color-primary);
+    color: var(--color-accent-light);
 }
 
 .contact__map {
@@ -857,7 +885,7 @@ p:last-child {
     overflow: hidden;
     box-shadow: var(--shadow-md);
     min-height: 350px;
-    border: 1px solid var(--color-gray-200);
+    border: 1px solid rgba(192, 192, 192, 0.1);
 }
 
 .contact__map iframe {
@@ -868,9 +896,10 @@ p:last-child {
    Footer
    ============================================================ */
 .footer {
-    background-color: var(--color-primary-dark);
-    color: rgba(255, 255, 255, 0.75);
+    background-color: #050505;
+    color: rgba(192, 192, 192, 0.65);
     padding: var(--space-3xl) 0 0;
+    border-top: 1px solid rgba(192, 192, 192, 0.06);
 }
 
 .footer__grid {
@@ -878,7 +907,7 @@ p:last-child {
     grid-template-columns: 1.3fr 1fr 0.8fr;
     gap: var(--space-2xl);
     padding-bottom: var(--space-2xl);
-    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    border-bottom: 1px solid rgba(192, 192, 192, 0.08);
 }
 
 .footer__heading {
@@ -899,7 +928,7 @@ p:last-child {
 .footer__text {
     font-size: var(--font-size-sm);
     line-height: var(--line-height-loose);
-    color: rgba(255, 255, 255, 0.65);
+    color: rgba(192, 192, 192, 0.55);
 }
 
 .footer__contact-list {
@@ -923,13 +952,13 @@ p:last-child {
 }
 
 .footer__contact-list a {
-    color: rgba(255, 255, 255, 0.75);
+    color: rgba(192, 192, 192, 0.65);
     transition: color var(--transition-fast);
     text-decoration: none;
 }
 
 .footer__contact-list a:hover {
-    color: var(--color-accent);
+    color: var(--color-accent-light);
 }
 
 .footer__social {
@@ -944,24 +973,27 @@ p:last-child {
     width: 42px;
     height: 42px;
     border-radius: 50%;
-    background-color: rgba(255, 255, 255, 0.1);
-    color: var(--color-white);
+    background-color: rgba(192, 192, 192, 0.08);
+    border: 1px solid rgba(192, 192, 192, 0.1);
+    color: var(--color-accent);
     font-size: var(--font-size-md);
     transition: all var(--transition-base);
     text-decoration: none;
 }
 
 .footer__social-link:hover {
-    background-color: var(--color-accent);
-    color: var(--color-primary-dark);
+    background: var(--gradient-silver);
+    color: #0a0a0a;
+    border-color: transparent;
     transform: translateY(-2px);
+    box-shadow: 0 0 15px rgba(192, 192, 192, 0.15);
 }
 
 .footer__bottom {
     text-align: center;
     padding: var(--space-lg) 0;
     font-size: var(--font-size-xs);
-    color: rgba(255, 255, 255, 0.45);
+    color: rgba(192, 192, 192, 0.35);
 }
 
 /* ============================================================
@@ -975,7 +1007,7 @@ p:last-child {
     display: block;
     font-size: var(--font-size-sm);
     font-weight: 600;
-    color: var(--color-gray-800);
+    color: var(--color-accent-light);
     margin-bottom: var(--space-xs);
 }
 
@@ -989,16 +1021,16 @@ p:last-child {
     padding: 0.7rem 1rem;
     font-size: var(--font-size-base);
     color: var(--color-gray-800);
-    background-color: var(--color-white);
-    border: 1.5px solid var(--color-gray-300);
+    background-color: #1a1a1a;
+    border: 1.5px solid rgba(192, 192, 192, 0.15);
     border-radius: var(--radius-md);
     transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
     outline: none;
 }
 
 .form-control:focus {
-    border-color: var(--color-primary);
-    box-shadow: 0 0 0 3px rgba(27, 58, 92, 0.12);
+    border-color: var(--color-accent);
+    box-shadow: 0 0 0 3px rgba(192, 192, 192, 0.1);
 }
 
 .form-control::placeholder {
@@ -1012,7 +1044,7 @@ textarea.form-control {
 
 select.form-control {
     appearance: none;
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236C757D' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23999999' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
     background-repeat: no-repeat;
     background-position: right 1rem center;
     background-size: 12px;
@@ -1029,7 +1061,8 @@ select.form-control {
     font-size: var(--font-size-sm);
     color: var(--color-success);
     padding: var(--space-md);
-    background-color: rgba(40, 167, 69, 0.08);
+    background-color: rgba(40, 167, 69, 0.1);
+    border: 1px solid rgba(40, 167, 69, 0.2);
     border-radius: var(--radius-md);
     margin-bottom: var(--space-md);
 }
@@ -1046,37 +1079,38 @@ select.form-control {
 }
 
 .alert--success {
-    background-color: rgba(40, 167, 69, 0.08);
-    border-color: rgba(40, 167, 69, 0.2);
-    color: #155724;
+    background-color: rgba(40, 167, 69, 0.1);
+    border-color: rgba(40, 167, 69, 0.25);
+    color: #7dcea0;
 }
 
 .alert--danger {
-    background-color: rgba(220, 53, 69, 0.08);
-    border-color: rgba(220, 53, 69, 0.2);
-    color: #721c24;
+    background-color: rgba(220, 53, 69, 0.1);
+    border-color: rgba(220, 53, 69, 0.25);
+    color: #f1948a;
 }
 
 .alert--warning {
     background-color: rgba(255, 193, 7, 0.1);
-    border-color: rgba(255, 193, 7, 0.3);
-    color: #856404;
+    border-color: rgba(255, 193, 7, 0.25);
+    color: #f9e79f;
 }
 
 .alert--info {
-    background-color: rgba(23, 162, 184, 0.08);
-    border-color: rgba(23, 162, 184, 0.2);
-    color: #0c5460;
+    background-color: rgba(23, 162, 184, 0.1);
+    border-color: rgba(23, 162, 184, 0.25);
+    color: #85c1e9;
 }
 
 /* ============================================================
-   Service Page — Hero
+   Service Page -- Hero
    ============================================================ */
 .service-hero {
-    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 50%, #0E1F30 100%);
+    background: var(--gradient-hero);
     padding: calc(var(--navbar-height) + var(--space-3xl)) 0 var(--space-3xl);
     text-align: center;
     color: var(--color-white);
+    border-bottom: 1px solid rgba(192, 192, 192, 0.06);
 }
 
 .service-hero__icon {
@@ -1086,8 +1120,8 @@ select.form-control {
     width: 90px;
     height: 90px;
     border-radius: 50%;
-    background: rgba(201, 169, 78, 0.15);
-    border: 2px solid rgba(201, 169, 78, 0.3);
+    background: rgba(192, 192, 192, 0.06);
+    border: 2px solid rgba(192, 192, 192, 0.15);
     color: var(--color-accent);
     font-size: 2.2rem;
     margin-bottom: var(--space-lg);
@@ -1103,12 +1137,12 @@ select.form-control {
 
 .service-hero__price {
     font-size: var(--font-size-lg);
-    color: rgba(255, 255, 255, 0.85);
+    color: rgba(192, 192, 192, 0.75);
     margin-bottom: 0;
 }
 
 .service-hero__price strong {
-    color: var(--color-accent);
+    color: var(--color-accent-light);
 }
 
 .service-hero__price i {
@@ -1117,7 +1151,7 @@ select.form-control {
 }
 
 /* ============================================================
-   Service Page — Detail Layout
+   Service Page -- Detail Layout
    ============================================================ */
 .service-detail {
     display: grid;
@@ -1140,7 +1174,7 @@ select.form-control {
 .service-detail__info h2 {
     font-size: var(--font-size-xl);
     font-weight: 700;
-    color: var(--color-gray-900);
+    color: var(--color-white);
     margin-bottom: var(--space-lg);
     margin-top: var(--space-2xl);
 }
@@ -1155,7 +1189,7 @@ select.form-control {
 }
 
 /* ============================================================
-   Service Page — Requirements List
+   Service Page -- Requirements List
    ============================================================ */
 .requirements-list {
     display: flex;
@@ -1180,7 +1214,7 @@ select.form-control {
 }
 
 /* ============================================================
-   Service Page — Process Steps
+   Service Page -- Process Steps
    ============================================================ */
 .process-list {
     display: flex;
@@ -1205,19 +1239,19 @@ select.form-control {
     width: 36px;
     height: 36px;
     border-radius: 50%;
-    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
-    color: var(--color-white);
+    background: var(--gradient-silver);
+    color: #0a0a0a;
     font-size: var(--font-size-sm);
     font-weight: 700;
     flex-shrink: 0;
 }
 
 /* ============================================================
-   Service Page — Form Card
+   Service Page -- Form Card
    ============================================================ */
 .service-detail__form {
-    background-color: var(--color-white);
-    border: 1px solid var(--color-gray-200);
+    background-color: #141414;
+    border: 1px solid rgba(192, 192, 192, 0.1);
     border-radius: var(--radius-lg);
     padding: var(--space-2xl);
     box-shadow: var(--shadow-md);
@@ -1228,7 +1262,7 @@ select.form-control {
 .service-detail__form h2 {
     font-size: var(--font-size-xl);
     font-weight: 700;
-    color: var(--color-gray-900);
+    color: var(--color-white);
     margin-bottom: var(--space-xl);
     text-align: center;
 }
@@ -1237,7 +1271,7 @@ select.form-control {
     display: block;
     font-size: var(--font-size-sm);
     font-weight: 600;
-    color: var(--color-gray-800);
+    color: var(--color-accent-light);
     margin-bottom: var(--space-xs);
 }
 
@@ -1257,7 +1291,8 @@ select.form-control {
     max-width: 500px;
     margin: 0 auto;
     padding: var(--space-3xl);
-    background: var(--color-white);
+    background: #141414;
+    border: 1px solid rgba(192, 192, 192, 0.1);
     border-radius: var(--radius-lg);
     box-shadow: var(--shadow-lg);
 }
@@ -1269,7 +1304,7 @@ select.form-control {
 }
 
 .confirmation-card h1 {
-    color: var(--color-primary);
+    color: var(--color-white);
     margin-bottom: var(--space-md);
 }
 
@@ -1301,7 +1336,7 @@ select.form-control {
 }
 
 /* ============================================================
-   Responsive — Tablet (768px)
+   Responsive -- Tablet (768px)
    ============================================================ */
 @media (max-width: 1024px) {
     .values__grid {
@@ -1330,12 +1365,13 @@ select.form-control {
         width: 85%;
         max-width: 360px;
         height: 100vh;
-        background-color: var(--color-white);
+        background-color: #0a0a0a;
         box-shadow: var(--shadow-xl);
         padding: calc(var(--navbar-height) + var(--space-lg)) var(--space-xl) var(--space-xl);
         transition: right var(--transition-slow);
         overflow-y: auto;
         z-index: 999;
+        border-left: 1px solid rgba(192, 192, 192, 0.08);
     }
 
     .navbar__menu.active {
@@ -1351,7 +1387,7 @@ select.form-control {
     .navbar__link {
         padding: 0.85rem 0;
         font-size: var(--font-size-base);
-        border-bottom: 1px solid var(--color-gray-100);
+        border-bottom: 1px solid rgba(192, 192, 192, 0.06);
     }
 
     .navbar__link:hover {
@@ -1369,6 +1405,7 @@ select.form-control {
         max-height: 0;
         overflow: hidden;
         transition: max-height var(--transition-base);
+        background-color: transparent;
     }
 
     .navbar__item--dropdown.active .navbar__dropdown {
@@ -1377,14 +1414,14 @@ select.form-control {
 
     .navbar__dropdown-link {
         padding: 0.6rem 0;
-        border-bottom: 1px solid var(--color-gray-100);
+        border-bottom: 1px solid rgba(192, 192, 192, 0.06);
     }
 
     /* Mobile overlay */
     .navbar__overlay {
         position: fixed;
         inset: 0;
-        background-color: rgba(0, 0, 0, 0.4);
+        background-color: rgba(0, 0, 0, 0.6);
         z-index: 998;
         opacity: 0;
         visibility: hidden;
@@ -1477,10 +1514,15 @@ select.form-control {
         grid-template-columns: 1fr;
         gap: var(--space-xl);
     }
+
+    /* Logo smaller on mobile */
+    .navbar__logo {
+        height: 45px;
+    }
 }
 
 /* ============================================================
-   Responsive — Small Mobile (480px)
+   Responsive -- Small Mobile (480px)
    ============================================================ */
 @media (max-width: 480px) {
     .container {
@@ -1561,20 +1603,31 @@ select.form-control {
         min-height: auto;
         padding: var(--space-xl) 0;
         background: none;
-        color: var(--color-gray-900);
+        color: #212529;
     }
 
     .hero__title,
     .hero__subtitle {
-        color: var(--color-gray-900);
+        color: #212529;
     }
 
     .section {
         padding: var(--space-xl) 0;
+        background-color: #fff;
     }
 
     body {
         font-size: 12pt;
+        color: #212529;
+        background-color: #fff;
+    }
+
+    h1, h2, h3, h4, h5, h6 {
+        color: #212529;
+    }
+
+    .section__title {
+        color: #212529;
     }
 }
 
@@ -1598,7 +1651,7 @@ select.form-control {
 }
 
 :focus-visible {
-    outline: 2px solid var(--color-primary);
+    outline: 2px solid var(--color-accent);
     outline-offset: 2px;
 }
 
diff --git a/includes/header.php b/includes/header.php
index c9b15d2..7fc88d4 100644
--- a/includes/header.php
+++ b/includes/header.php
@@ -16,6 +16,9 @@
 
     <!-- Site Stylesheet -->
     <link rel="stylesheet" href="assets/css/style.css">
+
+    <!-- Dark theme meta -->
+    <meta name="theme-color" content="#0a0a0a">
 </head>
 <body>