<!-- ===== STYLE GUIDE PREVIEW ===== -->
<div style="max-width:1200px;margin:0 auto;padding:24px;color:#fff;">

  <!-- TITLE -->
  <h2 style="color:#FFD700;margin:0 0 16px 0;">Style Guide</h2>
  <p style="opacity:.8;margin:0 0 32px 0;">
    Preview of Hero, Buttons, Colors, and Typography using global CSS.
  </p>

  <!-- HERO PREVIEW -->
  <section class="hero" style="border:1px dashed rgba(255,255,255,.2);">
    <div class="hero__content">
      <h1 class="hero__title">Fast &amp; Reliable Vehicle Clearance</h1>
      <p class="hero__tagline">Exports • Cross-Border • Engine Change • Stolen Recovery • Roadworthy</p>
      <div class="hero__actions">
        <a href="#" class="btn btn--primary">Get Clearance</a>
        <a href="#contact" class="btn btn--outline">Contact Us</a>
      </div>
    </div>
  </section>

  <!-- SPACER -->
  <div style="height:32px"></div>

  <!-- BUTTONS -->
  <h3 style="margin:0 0 12px 0;">Buttons</h3>
  <div style="display:flex;gap:16px;flex-wrap:wrap;">
    <a class="btn btn--primary" href="#">Primary</a>
    <a class="btn btn--outline" href="#">Outline</a>
    <a class="btn btn--primary" style="font-size:14px;padding:8px 16px;">Small Primary</a>
    <a class="btn btn--outline" style="font-size:14px;padding:8px 16px;">Small Outline</a>
  </div>

  <!-- SPACER -->
  <div style="height:32px"></div>

  <!-- COLOR SWATCHES -->
  <h3 style="margin:0 0 12px 0;">Color Swatches</h3>
  <div style="display:flex;flex-wrap:wrap;gap:16px;">
    <div style="flex:0 0 140px;text-align:center;">
      <div style="width:100%;height:60px;background:#FFD700;border:1px solid #ccc;border-radius:6px;"></div>
      <p style="margin:6px 0 0 0;font-size:12px;">Gold<br>#FFD700</p>
    </div>
    <div style="flex:0 0 140px;text-align:center;">
      <div style="width:100%;height:60px;background:#E5C200;border:1px solid #ccc;border-radius:6px;"></div>
      <p style="margin:6px 0 0 0;font-size:12px;">Gold Hover<br>#E5C200</p>
    </div>
    <div style="flex:0 0 140px;text-align:center;">
      <div style="width:100%;height:60px;background:#D4B300;border:1px solid #ccc;border-radius:6px;"></div>
      <p style="margin:6px 0 0 0;font-size:12px;">Gold Pressed<br>#D4B300</p>
    </div>
    <div style="flex:0 0 140px;text-align:center;">
      <div style="width:100%;height:60px;background:#111111;border:1px solid #ccc;border-radius:6px;"></div>
      <p style="margin:6px 0 0 0;font-size:12px;">Black<br>#111111</p>
    </div>
    <div style="flex:0 0 140px;text-align:center;">
      <div style="width:100%;height:60px;background:#333333;border:1px solid #ccc;border-radius:6px;"></div>
      <p style="margin:6px 0 0 0;font-size:12px;">Dark Gray<br>#333333</p>
    </div>
    <div style="flex:0 0 140px;text-align:center;">
      <div style="width:100%;height:60px;background:#C8C8C8;border:1px solid #ccc;border-radius:6px;"></div>
      <p style="margin:6px 0 0 0;font-size:12px;">Light Gray<br>#C8C8C8</p>
    </div>
  </div>

  <!-- SPACER -->
  <div style="height:32px"></div>

  <!-- TYPOGRAPHY SCALE -->
  <h3 style="margin:0 0 12px 0;">Typography Scale</h3>
  <div style="display:grid;gap:16px;max-width:680px;">
    <h1>H1 · Hero Title Example</h1>
    <h2>H2 · Section Title Example</h2>
    <h3>H3 · Subsection Title Example</h3>
    <h4>H4 · Smaller Heading Example</h4>
    <h5>H5 · Minor Heading Example</h5>
    <h6>H6 · Label Heading Example</h6>
    <p>Paragraph · This is sample body text styled as the site’s default. It shows readability and spacing across breakpoints.</p>
    <p class="lead">Lead Text · A slightly larger intro paragraph style.</p>
    <p class="caption">Caption · Small, muted text for metadata or notes.</p>
  </div>
</div>