Problems: larger icons 80x80, horizontal row layout (icon left + text right)

index_ibm.html

@@ -396,39 +396,48 @@ h1 .accent { color: var(--accent); }
 }
 
 /* ============================================================
-   PROBLEMS — 3-column grid
+   PROBLEMS — horizontal row layout (icon left, text right)
    ============================================================ */
 .problem-card {
     padding: 40px 32px; border-right: 1px solid var(--border);
     border-bottom: 1px solid var(--border);
     position: relative; transition: all 0.4s var(--ease-out);
+    display: flex; gap: 32px; align-items: flex-start;
 }
 .problem-card:nth-child(3n) { border-right: none; }
 .problem-card:nth-last-child(-n+3) { border-bottom: none; }
 .problem-card:hover {
     background: var(--accent-dim);
 }
+.problem-icon {
+    flex-shrink: 0; width: 80px; height: 80px;
+    border: 1px solid rgba(239,68,68,0.2);
+    border-radius: 12px; display: flex; align-items: center;
+    justify-content: center; margin: 0;
+    color: var(--red); opacity: 0.8;
+    transition: all 0.4s var(--ease-out);
+    background: var(--red-dim);
+}
+.problem-card:hover .problem-icon {
+    opacity: 1; transform: scale(1.08);
+    box-shadow: 0 0 0 4px var(--red-dim);
+}
+.problem-icon svg { width: 36px; height: 36px; stroke-width: 1.2; }
+.problem-body {
+    display: flex; flex-direction: column; gap: 12px;
+}
 .problem-num {
     font-size: 0.6875rem; color: var(--text-dim);
-    font-family: var(--mono); margin-bottom: 20px;
+    font-family: var(--mono); letter-spacing: 0.05em;
-    letter-spacing: 0.05em;
 }
 .problem-card h3 {
-    font-size: 1.25rem; font-weight: 700; margin-bottom: 12px;
+    font-size: 1.375rem; font-weight: 700;
     letter-spacing: -0.02em;
 }
 .problem-card p {
-    font-size: 0.875rem; color: var(--text-sec); line-height: 1.6;
+    font-size: 0.9375rem; color: var(--text-sec); line-height: 1.6;
+    max-width: 400px;
 }
-/* IBM Carbon icon — warning triangle */
-.problem-icon {
-    width: 40px; height: 40px; border: 1px solid var(--red-dim);
-    border-radius: 8px; display: flex; align-items: center;
-    justify-content: center; margin-bottom: 20px;
-    color: var(--red); opacity: 0.7;
-    transition: all 0.3s var(--ease-out);
-}
-.problem-card:hover .problem-icon { opacity: 1; transform: scale(1.05); }
 
 /* ============================================================
    SOLUTION
@@ -869,38 +878,44 @@ h1 .accent { color: var(--accent); }
             <div class="problem-card reveal reveal-delay-1">
                 <div class="problem-icon">
                     <!-- IBM Carbon icon — disconnect -->
-                    <svg width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.3">
+                    <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.2">
                         <circle cx="4" cy="8" r="2"/><circle cx="12" cy="8" r="2"/>
                         <path d="M6 7l2-2M10 9l2-2"/>
                     </svg>
                 </div>
+                <div class="problem-body">
                     <div class="problem-num">01</div>
                     <h3>Данные разбросаны</h3>
                     <p>Пять источников данных — 1С, CRM, онлайн-банки, рекламные кабинеты, кассы. Каждый раз — ручная сводка. Нет единой картины.</p>
                 </div>
+            </div>
             <div class="problem-card reveal reveal-delay-2">
                 <div class="problem-icon">
                     <!-- IBM Carbon icon — eye off -->
-                    <svg width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.3">
+                    <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.2">
                         <path d="M1 8s2.5-4 7-4 7 4 7 4-2.5 4-7 4-7-4-7-4z"/>
                         <circle cx="8" cy="8" r="2"/><path d="M2 2l12 12"/>
                     </svg>
                 </div>
+                <div class="problem-body">
                     <div class="problem-num">02</div>
                     <h3>Не видно, где теряете</h3>
                     <p>Знаете, что выручка есть. Но не видите: какая реклама работает, какой менеджер теряет клиентов, какие точки убыточны.</p>
                 </div>
+            </div>
             <div class="problem-card reveal reveal-delay-3">
                 <div class="problem-icon">
                     <!-- IBM Carbon icon — clock -->
-                    <svg width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.3">
+                    <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.2">
                         <circle cx="8" cy="8" r="6"/>
                         <path d="M8 4v4l3 2"/>
                     </svg>
                 </div>
+                <div class="problem-body">
                     <div class="problem-num">03</div>
                     <h3>Отчёты приходят поздно</h3>
-                <p>В понедельник смотрите отчёт за прошлую неделю. Когда увидели проблему — деньги уже потеряны. Решение на основе вчерашних новостей.</p>
+                    <p>В понедельник смотрите отчёт за прошлую неделю. Когда увидели проблему — деньги уже потеряны.</p>
+                </div>
             </div>
         </div>
     </div>