Refine mobile clients section

styles.css

@@ -835,6 +835,7 @@ body.is-ready .loader {
   margin-top: 44px;
   background: var(--line);
   border: 1px solid var(--line);
+  counter-reset: client-logo;
 }
 
 .logo-grid figure {
@@ -1428,6 +1429,7 @@ body.is-ready .loader {
   position: relative;
   background: #e7e1d6;
   overflow: hidden;
+  isolation: isolate;
   transition: background 0.3s var(--ease), transform 0.3s var(--ease);
 }
 
@@ -1443,15 +1445,6 @@ body.is-ready .loader {
   transition: opacity 0.3s var(--ease);
 }
 
-.logo-grid figure:hover {
-  background: var(--paper);
-  transform: translateY(-3px);
-}
-
-.logo-grid figure:hover::after {
-  opacity: 1;
-}
-
 .logo-grid img {
   position: relative;
   z-index: 1;
@@ -1460,10 +1453,50 @@ body.is-ready .loader {
   transition: filter 0.35s var(--ease), opacity 0.35s var(--ease), transform 0.35s var(--ease);
 }
 
-.logo-grid figure:hover img {
+@media (hover: hover) and (pointer: fine) {
+  .logo-grid figure:hover {
+    background: var(--paper);
+    transform: translateY(-3px);
+  }
+
+  .logo-grid figure:hover::after {
+    opacity: 1;
+  }
+
+  .logo-grid figure:hover img {
     filter: none;
     opacity: 1;
     transform: scale(1.04);
+  }
+}
+
+@media (hover: none), (pointer: coarse) {
+  .logo-grid {
+    background: transparent;
+    border: 0;
+  }
+
+  .logo-grid figure {
+    background:
+      linear-gradient(145deg, rgba(241, 238, 230, 0.1), rgba(241, 238, 230, 0.045)),
+      #10100e;
+    border: 1px solid rgba(241, 238, 230, 0.16);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
+    transform: none;
+  }
+
+  .logo-grid figure::after {
+    background:
+      linear-gradient(90deg, rgba(241, 238, 230, 0.055) 1px, transparent 1px) 0 0 / 24px 24px,
+      linear-gradient(180deg, rgba(241, 238, 230, 0.045) 1px, transparent 1px) 0 0 / 24px 24px;
+    opacity: 0.42;
+  }
+
+  .logo-grid img {
+    filter: none;
+    opacity: 1;
+    transform: none;
+  }
 }
 
 .service-card {
@@ -1798,6 +1831,64 @@ html.js .reveal[data-delay="2"] {
     grid-template-columns: 1fr;
   }
 
+  .clients {
+    background:
+      linear-gradient(180deg, rgba(7, 7, 6, 0), rgba(17, 17, 15, 0.82) 34%, rgba(7, 7, 6, 0.96) 100%),
+      linear-gradient(135deg, rgba(115, 221, 255, 0.08), transparent 42%),
+      var(--ink);
+  }
+
+  .clients__head {
+    gap: 18px;
+  }
+
+  .clients .section-heading h2 {
+    font-size: 2.86rem;
+    line-height: 0.96;
+  }
+
+  .client-note {
+    max-width: 34rem;
+    color: rgba(241, 238, 230, 0.76);
+    font-size: 0.96rem;
+    line-height: 1.78;
+  }
+
+  .clients .logo-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 10px;
+    margin-top: 34px;
+  }
+
+  .logo-grid figure {
+    min-height: 98px;
+    padding: 20px 14px 16px;
+    border-radius: 8px;
+    box-shadow:
+      inset 0 1px 0 rgba(255, 255, 255, 0.06),
+      0 12px 30px rgba(0, 0, 0, 0.18);
+  }
+
+  .logo-grid figure::before {
+    counter-increment: client-logo;
+    content: counter(client-logo, decimal-leading-zero);
+    position: absolute;
+    top: 9px;
+    left: 11px;
+    z-index: 1;
+    color: rgba(241, 238, 230, 0.38);
+    font-family: var(--mono);
+    font-size: 0.56rem;
+    font-weight: 700;
+    line-height: 1;
+    letter-spacing: 0;
+  }
+
+  .logo-grid img {
+    max-width: 84%;
+    max-height: 44px;
+  }
+
   .station-strip {
     grid-template-columns: repeat(2, 1fr);
   }
@@ -1918,8 +2009,24 @@ html.js .reveal[data-delay="2"] {
     padding: 24px;
   }
 
+  .clients .section-heading h2 {
+    font-size: 2.4rem;
+  }
+
   .logo-grid figure {
-    min-height: 104px;
+    min-height: 92px;
+    padding: 19px 12px 15px;
+  }
+
+  .logo-grid figure::before {
+    top: 8px;
+    left: 9px;
+    font-size: 0.52rem;
+  }
+
+  .logo-grid img {
+    max-width: 88%;
+    max-height: 40px;
   }
 
   .station-strip {