Polish homepage feature cards: per-card accent color, gradient top bar, richer icon tiles

backend/static/css/theme.css

@@ -628,3 +628,53 @@ footer { background: var(--surface) !important; color: var(--muted) !important;
     .pipe-track { grid-template-columns: 1fr; }
     .logo { font-size: 1.45rem !important; }
 }
+
+/* =====================================================================
+   Feature cards — refined per-card accent treatment
+   Each of the three cards gets its own color (indigo / cyan / violet):
+   a gradient top bar, a richer icon tile, and a matching hover + underline.
+   Content/markup unchanged — purely visual polish.
+   ===================================================================== */
+.features-grid { gap: 1.9rem; }
+.features-grid .feature-card {
+    position: relative;
+    background: var(--surface) !important;
+}
+/* gradient accent bar along the top edge (clipped by the card radius) */
+.features-grid .feature-card::before {
+    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; z-index: 3;
+    background: var(--grad);
+}
+.features-grid .feature-card:nth-child(1)::before { background: linear-gradient(90deg, #6366f1, #818cf8); }
+.features-grid .feature-card:nth-child(2)::before { background: linear-gradient(90deg, #06b6d4, #22d3ee); }
+.features-grid .feature-card:nth-child(3)::before { background: linear-gradient(90deg, #a855f7, #c084fc); }
+
+/* icon area: drop the flat band, let the tile carry the color */
+.features-grid .feature-icon { background: transparent !important; padding: 1.85rem 1.6rem .5rem !important; }
+.features-grid .feature-icon span {
+    width: 66px; height: 66px; border-radius: 18px; font-size: 2rem;
+    display: grid; place-items: center; line-height: 1;
+    border: 1px solid var(--line);
+    transition: transform .35s cubic-bezier(.16,.84,.44,1), box-shadow .35s, border-color .35s;
+}
+.features-grid .feature-card:nth-child(1) .feature-icon span {
+    background: linear-gradient(135deg, rgba(99,102,241,.18), rgba(129,140,248,.06));
+    border-color: rgba(99,102,241,.32); box-shadow: 0 8px 18px rgba(99,102,241,.20);
+}
+.features-grid .feature-card:nth-child(2) .feature-icon span {
+    background: linear-gradient(135deg, rgba(34,211,238,.22), rgba(6,182,212,.07));
+    border-color: rgba(34,211,238,.38); box-shadow: 0 8px 18px rgba(34,211,238,.20);
+}
+.features-grid .feature-card:nth-child(3) .feature-icon span {
+    background: linear-gradient(135deg, rgba(168,85,247,.18), rgba(192,132,252,.06));
+    border-color: rgba(168,85,247,.32); box-shadow: 0 8px 18px rgba(168,85,247,.20);
+}
+.features-grid .feature-card:hover .feature-icon span { transform: translateY(-3px) scale(1.05); }
+
+/* heading underline + hover border pick up each card's accent */
+.features-grid .feature-card:nth-child(1) .feature-content h3::after { background: linear-gradient(90deg, #6366f1, #818cf8) !important; }
+.features-grid .feature-card:nth-child(2) .feature-content h3::after { background: linear-gradient(90deg, #06b6d4, #22d3ee) !important; }
+.features-grid .feature-card:nth-child(3) .feature-content h3::after { background: linear-gradient(90deg, #a855f7, #c084fc) !important; }
+.features-grid .feature-card:nth-child(1):hover { border-color: rgba(99,102,241,.45) !important; }
+.features-grid .feature-card:nth-child(2):hover { border-color: rgba(34,211,238,.50) !important; }
+.features-grid .feature-card:nth-child(3):hover { border-color: rgba(168,85,247,.45) !important; }