Логотип: пиксельная сетка с анимацией

index_ibm.html

@@ -155,15 +155,35 @@ section { padding: 120px 0; position: relative; z-index: 1; }
     font-size: 1.125rem; font-weight: 700; letter-spacing: -0.03em;
     display: flex; align-items: center; gap: 10px;
 }
-.logo-mark {
+.logo-pixel {
-    width: 32px; height: 32px; border-radius: 6px;
+    display: grid; grid-template-columns: repeat(4, 6px); gap: 2px;
-    background: var(--accent); display: flex; align-items: center;
+    flex-shrink: 0;
-    justify-content: center; font-family: 'IBM Plex Mono', 'SF Mono', monospace;
-    font-size: 0.8125rem; font-weight: 700; color: #fff;
-    transition: transform 0.3s var(--ease-out);
 }
-[data-theme="dark"] .logo-mark { color: #000; }
+.logo-pixel .px {
-.logo:hover .logo-mark { transform: rotate(-6deg) scale(1.05); }
+    width: 6px; height: 6px; border-radius: 2px;
+    background: var(--accent);
+    animation: pxLogo 2.5s ease-in-out infinite;
+}
+.logo-pixel .px:nth-child(odd) { animation-name: pxLogoBlink; }
+.logo-pixel .px:nth-child(1){animation-delay:0s}
+.logo-pixel .px:nth-child(2){animation-delay:0.15s}
+.logo-pixel .px:nth-child(3){animation-delay:0.3s}
+.logo-pixel .px:nth-child(4){animation-delay:0.45s}
+.logo-pixel .px:nth-child(5){animation-delay:0.6s}
+.logo-pixel .px:nth-child(6){animation-delay:0.75s}
+.logo-pixel .px:nth-child(7){animation-delay:0.9s}
+.logo-pixel .px:nth-child(8){animation-delay:1.05s}
+.logo-pixel .px:nth-child(9){animation-delay:1.2s}
+.logo-pixel .px:nth-child(10){animation-delay:0.1s}
+.logo-pixel .px:nth-child(11){animation-delay:0.25s}
+.logo-pixel .px:nth-child(12){animation-delay:0.4s}
+.logo-pixel .px:nth-child(13){animation-delay:0.55s}
+.logo-pixel .px:nth-child(14){animation-delay:0.7s}
+.logo-pixel .px:nth-child(15){animation-delay:0.85s}
+.logo-pixel .px:nth-child(16){animation-delay:1s}
+@keyframes pxLogo{0%,100%{opacity:0.3;transform:scale(0.85)}50%{opacity:1;transform:scale(1.1)}}
+@keyframes pxLogoBlink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.4;transform:scale(0.9)}}
+.logo:hover .logo-pixel { filter: drop-shadow(0 0 6px var(--accent-glow)); }
 .nav { display: flex; align-items: center; gap: 40px; }
 .nav a {
     font-size: 0.8125rem; color: var(--text-sec);
@@ -794,7 +814,12 @@ h1 {
 <header class="header" id="header">
     <div class="wrap">
         <div class="logo">
-            <div class="logo-mark">R</div>
+            <div class="logo-pixel">
+                <span class="px"></span><span class="px"></span><span class="px"></span><span class="px"></span>
+                <span class="px"></span><span class="px"></span><span class="px"></span><span class="px"></span>
+                <span class="px"></span><span class="px"></span><span class="px"></span><span class="px"></span>
+                <span class="px"></span><span class="px"></span><span class="px"></span><span class="px"></span>
+            </div>
             ROI24
         </div>
         <nav class="nav">