Replace emoji icons with Unsplash free images (Paraguay, Banking, Legal, Taxes, ERP)

css/styles.css

@@ -120,6 +120,79 @@ body {
 ::-webkit-scrollbar-thumb { background: #bdc3c7; border-radius: 4px; }
 ::-webkit-scrollbar-thumb:hover { background: #95a5a6; }
 
+/* ========================================
+   IMAGE STYLES
+   ======================================== */
+
+/* Hero background image */
+.hero-image {
+  position: absolute;
+  top: 0; left: 0; right: 0; bottom: 0;
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+  filter: brightness(0.45) saturate(1.1);
+}
+
+.hero-content { position: relative; z-index: 1; }
+
+/* About card images */
+.about-image {
+  width: 100%;
+  height: 180px;
+  object-fit: cover;
+  border-radius: 8px 8px 0 0;
+  margin: -20px -20px 16px -20px;
+  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
+  filter: saturate(0.85);
+}
+.about-card:hover .about-image {
+  transform: scale(1.03);
+  filter: saturate(1);
+}
+
+/* Banner image */
+.banner-image {
+  width: 52px;
+  height: 52px;
+  border-radius: 12px;
+  object-fit: cover;
+  flex-shrink: 0;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  animation: floatSlow 4s ease-in-out infinite;
+}
+
+/* Modal images */
+.modal-image {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  object-fit: cover;
+  margin: 0 auto 16px;
+  display: block;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+}
+
+/* Newsletter image */
+.newsletter-image {
+  width: 80px;
+  height: 80px;
+  border-radius: 16px;
+  object-fit: cover;
+  margin: 0 auto 16px;
+  display: block;
+  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
+}
+
+/* Remove old icon float animation since we use images now */
+.about-icon {
+  font-size: 2.5rem;
+  margin-bottom: 12px;
+  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+  display: inline-block;
+}
+
 /* Text selection */
 ::selection { background: rgba(24, 119, 242, 0.2); color: #1c1e21; }
 
@@ -286,7 +359,7 @@ body {
   overflow: hidden;
 }
 
-/* Subtle mesh pattern overlay */
+/* Subtle mesh pattern overlay — sits above image, below content */
 .hero::before {
   content: '';
   position: absolute;
@@ -294,6 +367,7 @@ body {
   background: radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.08) 0%, transparent 60%),
               radial-gradient(ellipse at 70% 80%, rgba(255,255,255,0.05) 0%, transparent 50%);
   pointer-events: none;
+  z-index: 1;
 }
 
 .hero-content { position: relative; z-index: 1; }