Restore What's Included section with cleaner equation layout

- Replace bulky gradient box with original side-by-side card design
- Add equation-style layout: skill card + operator + commands card
- Improve hero hook copy to explain what Impeccable does
- Clean, minimal styling that matches site aesthetic

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

public/css/main.css

@@ -479,7 +479,7 @@ code {
   color: var(--color-charcoal);
 }
 
-.hero-problem-text {
+.hero-hook-text {
   font-size: clamp(1rem, 1.5vw, 1.125rem);
   line-height: 1.6;
   color: var(--color-ash);
@@ -487,6 +487,79 @@ code {
   margin: 0;
 }
 
+/* Hero Equation - What's Included */
+.hero-equation {
+  display: flex;
+  align-items: stretch;
+  gap: var(--spacing-sm);
+  max-width: 480px;
+}
+
+.equation-block {
+  flex: 1;
+  padding: var(--spacing-sm) var(--spacing-md);
+  border: 1px solid var(--color-mist);
+  background: var(--color-paper);
+  text-align: left;
+}
+
+.equation-label {
+  display: inline-block;
+  font-family: var(--font-body);
+  font-size: 0.5625rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--color-paper);
+  background: var(--color-ink);
+  padding: 2px 6px;
+  margin-bottom: 6px;
+}
+
+.equation-title {
+  display: block;
+  font-family: var(--font-mono);
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--color-ink);
+  margin-bottom: 4px;
+}
+
+.equation-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  font-size: 0.75rem;
+  color: var(--color-ash);
+  line-height: 1.5;
+}
+
+.equation-operator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--font-display);
+  font-size: 1.75rem;
+  font-weight: 300;
+  color: var(--color-accent);
+  flex-shrink: 0;
+  width: 32px;
+}
+
+@media (max-width: 600px) {
+  .hero-equation {
+    flex-direction: column;
+    gap: var(--spacing-xs);
+    max-width: 100%;
+  }
+
+  .equation-operator {
+    width: auto;
+    height: 24px;
+    font-size: 1.25rem;
+  }
+}
+
 .hero-cta-group {
   display: flex;
   align-items: center;

public/index.html

@@ -67,7 +67,27 @@
         <h1 class="hero-title-combined">Impeccable</h1>
         <p class="hero-tagline-combined">Design fluency for AI coding tools</p>
 
-        <p class="hero-problem-text">Every LLM learned from the same generic templates. Without explicit guidance, they converge on predictable defaults.</p>
+        <p class="hero-hook-text">Stop getting generic AI output. Impeccable teaches your AI to design with intention—real typography, purposeful color, and layouts that don't look like every other template.</p>
+
+        <div class="hero-equation">
+          <div class="equation-block">
+            <span class="equation-label">Enhanced Skill</span>
+            <span class="equation-title">frontend-design</span>
+            <ul class="equation-list">
+              <li>Anthropic's original</li>
+              <li>+ curated anti-patterns</li>
+            </ul>
+          </div>
+          <span class="equation-operator">+</span>
+          <div class="equation-block">
+            <span class="equation-label">Steering Commands</span>
+            <span class="equation-title">17 commands</span>
+            <ul class="equation-list">
+              <li>/polish, /audit, /simplify</li>
+              <li>/bolder, /quieter, and more</li>
+            </ul>
+          </div>
+        </div>
 
         <div class="hero-cta-group">
           <a href="#downloads" class="hero-cta-combined">Get Started</a>