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; }

index.html

@@ -69,7 +69,7 @@
       <div class="login-steps">
         <!-- Step 1: Username -->
         <div class="login-step active" id="login-step-1">
-          <div class="login-icon">💬</div>
+          <img src="https://images.unsplash.com/photo-1611162616475-46b635cb6868?w=80&h=80&fit=crop&q=80" alt="Telegram" class="modal-image" />
           <h2 class="hide-de">Telegram Username eingeben</h2>
           <h2 class="hide-en">Enter Telegram Username</h2>
           <p class="login-hint">
@@ -86,7 +86,7 @@
         </div>
         <!-- Step 2: Code -->
         <div class="login-step" id="login-step-2">
-          <div class="login-icon">🔐</div>
+          <img src="https://images.unsplash.com/photo-1567427017947-545c5f8d16ad?w=80&h=80&fit=crop&q=80" alt="Verification" class="modal-image" />
           <h2 class="hide-de">Verifizierungscode</h2>
           <h2 class="hide-en">Verification Code</h2>
           <p class="login-hint">
@@ -103,7 +103,7 @@
         </div>
         <!-- Step 3: Registration -->
         <div class="login-step" id="login-step-3">
-          <div class="login-icon">🎉</div>
+          <img src="https://images.unsplash.com/photo-1521791136064-7986c2920216?w=80&h=80&fit=crop&q=80" alt="Registration" class="modal-image" />
           <h2 class="hide-de">Registrierung abschließen</h2>
           <h2 class="hide-en">Complete Registration</h2>
           <div class="form-group">
@@ -238,7 +238,7 @@
 
   <!-- Hero Section -->
   <section class="hero" id="hero">
-    <div class="hero-particles" id="hero-particles"></div>
+    <img src="https://images.unsplash.com/photo-1569288052389-dac9b098dcd1?w=1600&h=800&fit=crop&q=75" alt="Paraguay landscape" class="hero-image" />
     <div class="hero-content">
       <h1 class="hero-title">
         <span class="hide-de">Paraguay LLC & SRL Community</span>
@@ -266,15 +266,12 @@
         </div>
       </div>
     </div>
-    <div class="hero-scroll-indicator">
-      <div class="scroll-arrow"></div>
-    </div>
   </section>
 
   <!-- Telegram Banner (nicht logged-in) -->
   <div class="telegram-banner" id="telegram-banner">
     <div class="banner-content">
-      <span class="banner-icon">📱</span>
+      <img src="https://images.unsplash.com/photo-1614680376593-902f74cf0d41?w=64&h=64&fit=crop&q=80" alt="Telegram" class="banner-image" />
       <div class="banner-text">
         <strong>
           <span class="hide-de">Noch nicht angemeldet?</span>
@@ -302,8 +299,8 @@
           <span class="hide-en">About the Community</span>
         </h2>
         <div class="about-grid">
-          <div class="about-card">
+          <div class="about-card" data-image="banking">
-            <div class="about-icon">🏦</div>
+            <img src="https://images.unsplash.com/photo-1601597111158-2fceff292cdc?w=400&h=250&fit=crop&q=80" alt="Banking" class="about-image" />
             <h3>
               <span class="hide-de">Banken & Zahlungsverkehr</span>
               <span class="hide-en">Banking & Payments</span>
@@ -313,8 +310,8 @@
               <span class="hide-en">Experiences with Paraguayan and international banks, accounts, transfers and credit cards.</span>
             </p>
           </div>
-          <div class="about-card">
+          <div class="about-card" data-image="legal">
-            <div class="about-icon">⚖️</div>
+            <img src="https://images.unsplash.com/photo-1589829545856-d10d557cf95f?w=400&h=250&fit=crop&q=80" alt="Legal" class="about-image" />
             <h3>
               <span class="hide-de">Rechtliches</span>
               <span class="hide-en">Legal Matters</span>
@@ -324,8 +321,8 @@
               <span class="hide-en">Corporate law, contracts, taxes, compliance and jurisprudence in Paraguay.</span>
             </p>
           </div>
-          <div class="about-card">
+          <div class="about-card" data-image="taxes">
-            <div class="about-icon">📊</div>
+            <img src="https://images.unsplash.com/photo-1554224155-6726b3ff858f?w=400&h=250&fit=crop&q=80" alt="Taxes" class="about-image" />
             <h3>
               <span class="hide-de">Steuern & Buchhaltung</span>
               <span class="hide-en">Taxes & Accounting</span>
@@ -335,8 +332,8 @@
               <span class="hide-en">Tax advice, accounting systems, annual statements and international tax planning.</span>
             </p>
           </div>
-          <div class="about-card">
+          <div class="about-card" data-image="erp">
-            <div class="about-icon">💻</div>
+            <img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=400&h=250&fit=crop&q=80" alt="ERP Systems" class="about-image" />
             <h3>
               <span class="hide-de">ERP-Systeme</span>
               <span class="hide-en">ERP Systems</span>
@@ -394,7 +391,7 @@
     <section class="section section-alt newsletter-section" id="newsletter-section" style="display:none;">
       <div class="container">
         <div class="newsletter-card">
-          <div class="newsletter-icon">✉️</div>
+          <img src="https://images.unsplash.com/photo-1596526131083-e8c633c948d2?w=120&h=120&fit=crop&q=80" alt="Newsletter" class="newsletter-image" />
           <h2>
             <span class="hide-de">Newsletter</span>
             <span class="hide-en">Newsletter</span>