<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Product name, a clear one-line promise</title>
  <meta name="description" content="A minimal, accessible landing page skeleton you can adapt to your product.">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <a class="skip-link" href="#main">Skip to main content</a>

  <header class="site-header">
    <div class="container header-inner">
      <a class="brand" href="#top" id="top">
        <span class="brand-mark" aria-hidden="true"></span>
        <span class="brand-name">Northstar</span>
      </a>
      <nav class="site-nav" aria-label="Primary">
        <ul>
          <li><a href="#features">Features</a></li>
          <li><a href="#proof">Results</a></li>
          <li><a href="#start">Get started</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <main id="main">
    <section class="hero" aria-labelledby="hero-title">
      <div class="container hero-inner">
        <p class="eyebrow">Built for small teams</p>
        <h1 id="hero-title">Ship your idea without the busywork</h1>
        <p class="lede">
          A calm starting point for your next page. Semantic markup, sensible
          defaults and no dependencies, so you can focus on the words that matter.
        </p>
        <p class="hero-cta">
          <a class="btn btn-primary" href="#start">Start building</a>
        </p>
      </div>
    </section>

    <section id="features" class="features" aria-labelledby="features-title">
      <div class="container">
        <h2 id="features-title" class="section-title">What you get</h2>
        <ul class="feature-grid">
          <li class="feature">
            <span class="feature-icon" aria-hidden="true">
              <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l8 4v5c0 5-3.4 7.7-8 9-4.6-1.3-8-4-8-9V7z"/></svg>
            </span>
            <h3>Accessible by default</h3>
            <p>Skip links, visible focus and honest landmarks are already wired in.</p>
          </li>
          <li class="feature">
            <span class="feature-icon" aria-hidden="true">
              <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2L4 14h6l-1 8 9-12h-6z"/></svg>
            </span>
            <h3>Zero dependencies</h3>
            <p>One HTML file and one stylesheet. No build step, no CDN, no fonts to fetch.</p>
          </li>
          <li class="feature">
            <span class="feature-icon" aria-hidden="true">
              <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="14" rx="2"/><path d="M8 21h8M12 18v3"/></svg>
            </span>
            <h3>Responsive</h3>
            <p>Mobile-first layout with a single breakpoint you can move or remove.</p>
          </li>
        </ul>
      </div>
    </section>

    <section id="proof" class="stats" aria-labelledby="stats-title">
      <div class="container">
        <h2 id="stats-title" class="section-title section-title-invert">By the numbers</h2>
        <dl class="stat-band">
          <div class="stat">
            <dt>Setup time</dt>
            <dd><span class="stat-value">2 min</span></dd>
          </div>
          <div class="stat">
            <dd class="stat-quote">
              "It gave us a clean base we actually kept."
            </dd>
            <dt class="stat-attrib">A happy maker</dt>
          </div>
          <div class="stat">
            <dt>External requests</dt>
            <dd><span class="stat-value">0</span></dd>
          </div>
        </dl>
      </div>
    </section>

    <section id="start" class="final-cta" aria-labelledby="cta-title">
      <div class="container final-cta-inner">
        <h2 id="cta-title">Ready when you are</h2>
        <p>Copy the two files, change the words and make it yours.</p>
        <p><a class="btn btn-primary" href="#top">Get started</a></p>
      </div>
    </section>
  </main>

  <footer class="site-footer">
    <div class="container footer-inner">
      <p class="footer-brand">Northstar</p>
      <nav aria-label="Footer">
        <ul>
          <li><a href="#features">Features</a></li>
          <li><a href="#proof">Results</a></li>
          <li><a href="#start">Get started</a></li>
        </ul>
      </nav>
      <p class="footer-note">A neutral template. Replace this line with your own.</p>
    </div>
  </footer>
</body>
</html>
