Redesign logo with badge icon, fix dark section heading colors on konesali page

- New logo: rounded square badge with server rack icon + two-line text layout
- Fix spec-section headings invisible on section-dark backgrounds (same color as bg)
- Add white text colors for h2, p, and icon in dark sections

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

style.css

@@ -85,10 +85,14 @@ a:hover {
     color: var(--color-text-heading);
 }
 
-.header.scrolled .logo-icon {
+.header.scrolled .logo-text-bottom {
     color: var(--color-primary);
 }
 
+.header.scrolled .logo-text-top {
+    opacity: 0.5;
+}
+
 .header.scrolled .nav a {
     color: var(--color-text-muted);
 }
@@ -112,25 +116,61 @@ a:hover {
 .logo {
     display: flex;
     align-items: center;
-    gap: 10px;
+    gap: 12px;
     color: var(--color-white);
     font-family: 'Space Grotesk', var(--font-family);
     font-size: 1.3rem;
     font-weight: 400;
     letter-spacing: -0.02em;
+    text-decoration: none;
 }
 
 .logo:hover {
     color: inherit;
 }
 
-.logo strong {
+.logo:hover .logo-icon {
+    transform: scale(1.04);
+}
+
+.logo-text {
+    display: flex;
+    flex-direction: column;
+    line-height: 1.1;
+}
+
+.logo-text-top {
+    font-size: 0.65rem;
+    font-weight: 600;
+    letter-spacing: 0.18em;
+    text-transform: uppercase;
+    opacity: 0.6;
+}
+
+.logo-text-bottom {
+    font-size: 1.35rem;
     font-weight: 700;
+    letter-spacing: -0.02em;
     color: var(--color-primary-light);
 }
 
 .logo-icon {
-    color: var(--color-primary-light);
+    width: 38px;
+    height: 38px;
+    flex-shrink: 0;
+    transition: transform 0.2s ease;
+}
+
+.logo-icon-bg {
+    fill: var(--color-primary);
+}
+
+.logo-icon-rack {
+    fill: rgba(255, 255, 255, 0.95);
+}
+
+.logo-icon-led {
+    fill: #fff;
 }
 
 .nav {
@@ -927,10 +967,15 @@ a:hover {
     margin-bottom: 12px;
 }
 
-.footer .logo-icon {
+.footer .logo-text-bottom {
     color: var(--color-primary-light);
 }
 
+.footer .logo-icon {
+    width: 32px;
+    height: 32px;
+}
+
 .footer-brand p {
     color: rgba(255, 255, 255, 0.5);
     font-size: 0.95rem;
@@ -1205,11 +1250,23 @@ a:hover {
     margin-bottom: 8px;
 }
 
+.section-dark .spec-section-header h2 {
+    color: var(--color-white);
+}
+
 .spec-section-header p {
     color: var(--color-text-muted);
     font-size: 1rem;
 }
 
+.section-dark .spec-section-header p {
+    color: rgba(255, 255, 255, 0.65);
+}
+
+.section-dark .spec-section-icon {
+    color: var(--color-primary-light);
+}
+
 .spec-intro {
     color: var(--color-text-body);
     line-height: 1.75;