Add hero section explaining what NoticeCheck does

Uses existing CSS classes (hero, trust-note, shield) for consistent
styling. Shows the tagline, description, and trust note.

Co-authored-by: Codex <codex@openai.com>

static/index.html

@@ -41,6 +41,21 @@
   </header>
 
   <main>
+    <section class="hero">
+      <div>
+        <p class="eyebrow" data-i18n="heroEyebrow">Pause. Inspect. Decide.</p>
+        <h1><span data-i18n="heroTitle">Look twice before you</span> <span data-i18n="heroSafe">trust it.</span></h1>
+        <p class="hero-text" data-i18n="heroText">NoticeCheck reviews suspicious messages and screenshots for pressure tactics, unsafe requests, and scam warning signs.</p>
+      </div>
+      <div class="trust-note">
+        <span class="shield">!</span>
+        <div>
+          <strong data-i18n="trustTitle">Evidence, not verification</strong>
+          <p data-i18n="trustText">Get a plain-language risk assessment, visible warning signs, and safer next actions. Always confirm independently.</p>
+        </div>
+      </div>
+    </section>
+
     <section class="workspace" aria-labelledby="checkerTitle">
       <div class="section-heading">
         <div>