Replace hero headline/badge/CBP logo with Marty's banner image — clean hero with just the image + CTAs below

index.html

@@ -40,12 +40,12 @@
      HERO SECTION — Above the fold
      ══════════════════════════════════════════════════════════ */
   .hero {
-      min-height: 100vh;
+        min-height: auto;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
-      padding: 40px 20px 60px;
+        padding: 32px 20px 48px;
       position: relative;
       overflow: hidden;
       background:
@@ -69,111 +69,28 @@
   .hero-content {
     position: relative;
     z-index: 1;
-    max-width: 800px;
+    max-width: 920px;
     width: 100%;
     text-align: center;
   }
 
-  /* Team badge */
-  .team-badge {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    background: rgba(0,229,255,0.1);
-    border: 1px solid rgba(0,229,255,0.25);
-    border-radius: 100px;
-    padding: 8px 20px;
-    font-size: 0.82rem;
-    font-weight: 600;
-    color: #00e5ff;
-    letter-spacing: 0.3px;
-    margin-bottom: 24px;
+  /* Hero banner image */
+  .hero-banner-img {
+    margin-bottom: 28px;
+    width: 100%;
+    max-width: 900px;
+    margin-left: auto;
+    margin-right: auto;
   }
-  .team-badge .dot {
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    background: var(--green);
-    animation: pulse-dot 2s infinite;
+  .hero-banner-img a {
+    display: block;
   }
-  @keyframes pulse-dot {
-    0%, 100% { opacity: 1; }
-    50% { opacity: 0.4; }
-  }
-
-  .hero h1 {
-    font-size: clamp(2.2rem, 6vw, 3.5rem);
-    font-weight: 800;
-    line-height: 1.15;
-    margin-bottom: 16px;
-    color: #f1f5f9;
-    text-shadow: 0 2px 30px rgba(251,191,36,0.15);
-  }
-  .hero h1 .gradient-text {
-    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #f97316 100%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-    text-shadow: none;
-  }
-
-  .hero-sub {
-    font-size: clamp(1rem, 2.2vw, 1.2rem);
-    color: var(--text-dim);
-    line-height: 1.6;
-    max-width: 620px;
-    margin: 0 auto 32px;
-  }
-
-  .hero-sub strong {
-    color: var(--text);
-    font-weight: 600;
-  }
-
-  /* CBP logo bar at top of hero */
-  .cbp-logo-bar {
-    display: inline-flex;
-    align-items: center;
-    gap: 10px;
-    background: rgba(0,229,255,0.06);
-    border: 1px solid rgba(0,229,255,0.2);
-    border-radius: 100px;
-    padding: 6px 18px 6px 10px;
-    margin-bottom: 14px;
-    backdrop-filter: blur(4px);
-  }
-  .cbp-logo-icon {
-    display: flex;
-    align-items: center;
-  }
-  .cbp-logo-text {
-    font-family: 'Orbitron', sans-serif;
-    font-size: 1.05rem;
-    font-weight: 700;
-    letter-spacing: 0.5px;
-  }
-  .cbp-logo-click {
-    background: linear-gradient(135deg, #00e5ff, #06b6d4);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-  }
-  .cbp-logo-pays {
-    background: linear-gradient(135deg, #a855f7, #d946ef);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-  }
-  .cbp-logo-badge {
-    font-size: 0.65rem;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-    color: var(--text-dim);
-    background: rgba(255,255,255,0.06);
-    padding: 2px 10px;
-    border-radius: 100px;
-    margin-left: 4px;
+  .hero-banner-img img {
+    width: 100%;
+    height: auto;
+    border-radius: 16px;
+    box-shadow: 0 4px 40px rgba(0,229,255,0.12);
+    display: block;
   }
 
   /* CTA buttons */
@@ -1113,37 +1030,12 @@
 <section class="hero" id="heroSection">
   <div class="hero-content">
 
-    <!-- CBP Logo / Brand bar -->
-    <div class="cbp-logo-bar">
-      <div class="cbp-logo-icon">
-        <svg viewBox="0 0 32 32" width="28" height="28" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <rect x="2" y="2" width="28" height="28" rx="6" stroke="url(#cbpGrad)" stroke-width="2.5" fill="rgba(0,229,255,0.08)"/>
-          <path d="M10 16h4l3-7 3 14 3-7h4" stroke="url(#cbpGrad)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-          <defs><linearGradient id="cbpGrad" x1="0" y1="0" x2="32" y2="32"><stop stop-color="#00e5ff"/><stop offset="1" stop-color="#a855f7"/></linearGradient></defs>
-        </svg>
+    <!-- Hero banner image -->
+    <div class="hero-banner-img">
+      <a href="https://clickbaitpays.me/?ref=cryptoteambuild" target="_blank" rel="noopener">
+        <img src="hero-banner.jpg" alt="Join the Crypto Team Build Network — Build the ClickBaitPays team project with us" />
+      </a>
     </div>
-      <div class="cbp-logo-text">
-        <span class="cbp-logo-click">ClickBait</span><span class="cbp-logo-pays">Pays</span>
-      </div>
-      <span class="cbp-logo-badge">Team Project</span>
-    </div>
-
-    <!-- Team badge -->
-    <div class="team-badge">
-      <span class="dot"></span>
-      Crypto Team Build Network — Exclusive
-    </div>
-
-    <!-- Headline -->
-    <h1><span class="gradient-text">Turn Clicks Into<br>a Passive Income Machine</span></h1>
-    <!-- HUD corner accent under headline -->
-    <div style="height:2px;width:60px;background:linear-gradient(90deg,transparent,#00e5ff,transparent);margin:0 auto 8px;opacity:0.5;"></div>
-
-    <p class="hero-sub">
-      ClickBaitPays is an ad platform where you run small campaigns,
-      click a <strong>few ads a day</strong>, and earn more than you spend.
-      No hype — just a system that works if you <strong>work the system.</strong>
-    </p>
 
     <!-- CTAs -->
     <div class="hero-ctas">