hypeorcode
Network offOpen alone (new tab)

Run details

Model
inception/mercury-3
Route
OpenRouter API, one user message
Reasoning
provider default, 7,281 reasoning tokens
Limits
60 min · 131,072 output tokens
Date
21 Oct 2026
Time
42 s
Size
40 kB
Tokens
83 in, 19,953 out
List price
$0.007 ($0.1 in / $0.35 out per M)
Paid
$0.007

Raw files: output · meta.json

Exact prompt

Build the landing page for Lumen Cycles, a Copenhagen workshop that builds custom cargo bikes to order. Make it look like a real brand you would trust with 4,000 euros.

It must be one complete, self-contained HTML file: inline all CSS and JavaScript, and make no network requests of any kind (no CDNs, web fonts or remote images). Reply with the file in a single ```html code block.

Source

40 kB 1,467 lines Raw

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lumen Cycles — Custom Cargo Bikes, Built in Copenhagen</title>
<style>
  :root {
    --paper: #f4f1e9;
    --paper-light: #fbf9f3;
    --ink: #181a1f;
    --ink-soft: #3c4047;
    --muted: #7c828b;
    --brass: #b28a52;
    --brass-dark: #82673b;
    --line: rgba(24, 26, 31, 0.12);
    --shadow: 0 8px 30px rgba(24, 26, 31, 0.08);
    --serif: Georgia, 'Times New Roman', Times, serif;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  }

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    font-family: var(--sans);
    background: var(--paper);
    color: var(--ink);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3 {
    font-family: var(--serif);
    font-weight: normal;
    letter-spacing: -0.01em;
  }

  a {
    color: inherit;
  }

  img, svg {
    display: block;
    max-width: 100%;
  }

  .container {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
  }

  /* Header */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(244, 241, 233, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
  }

  .nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 76px;
  }

  .logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    font-family: var(--serif);
    font-size: 1.6rem;
    letter-spacing: 0.02em;
    color: var(--ink);
  }

  .logo-mark {
    width: 34px;
    height: 34px;
    color: var(--brass);
  }

  .nav-links {
    display: flex;
    align-items: center;
    gap: 36px;
    list-style: none;
  }

  .nav-links a:not(.btn) {
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--ink-soft);
    transition: color 0.2s;
  }

  .nav-links a:not(.btn):hover {
    color: var(--brass);
  }

  .nav-cta {
    font-size: 0.95rem;
    font-weight: 600;
  }

  .btn {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 6px;
    font-family: var(--sans);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
  }

  .btn-primary {
    background: var(--brass);
    color: var(--ink);
  }

  .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(178, 138, 82, 0.35);
  }

  .btn-secondary {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.35);
    color: #fff;
  }

  .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.08);
  }

  .btn-dark {
    background: var(--ink);
    color: var(--paper);
  }

  .btn-dark:hover {
    background: var(--ink-soft);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
  }

  .menu-toggle {
    display: none;
    background: none;
    border: none;
    width: 40px;
    height: 40px;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
  }

  .menu-toggle span {
    display: block;
    height: 2px;
    width: 22px;
    background: var(--ink);
    margin: 0 auto;
  }

  .mobile-menu {
    display: none;
    border-top: 1px solid var(--line);
    padding: 16px 24px 24px;
  }

  .mobile-menu ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .mobile-menu a {
    text-decoration: none;
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--ink);
  }

  .mobile-menu.open {
    display: block;
  }

  /* Hero */
  .hero {
    position: relative;
    background: var(--ink);
    color: #fff;
    padding: 120px 0 96px;
    overflow: hidden;
  }

  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
    background-size: 80px 80px;
    opacity: 0.5;
  }

  .hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: center;
  }

  .hero-eyebrow {
    color: var(--brass);
    font-size: 0.85rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
  }

  .hero h1 {
    font-size: clamp(2.6rem, 5vw, 4.4rem);
    line-height: 1.1;
    margin: 16px 0 24px;
  }

  .hero p {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.72);
    max-width: 42ch;
  }

  .hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 40px;
  }

  .hero-svg {
    color: var(--brass);
  }

  .hero-svg svg {
    width: 100%;
    height: auto;
  }

  .hero-note {
    margin-top: 56px;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-top: 20px;
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
  }

  .hero-note span {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .hero-note svg {
    width: 18px;
    height: 18px;
    color: var(--brass);
  }

  /* Trust bar */
  .trust-bar {
    background: var(--paper-light);
    border-bottom: 1px solid var(--line);
  }

  .trust-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 0;
    list-style: none;
  }

  .trust-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: var(--muted);
  }

  .trust-list svg {
    width: 20px;
    height: 20px;
    color: var(--brass);
    flex-shrink: 0;
  }

  /* Sections */
  .section {
    padding: 104px 0;
  }

  .section-alt {
    background: var(--paper-light);
  }

  .section-label {
    color: var(--brass);
    font-size: 0.85rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 20px;
  }

  h2 {
    font-size: clamp(2rem, 3.2vw, 3.1rem);
    line-height: 1.15;
    margin-bottom: 32px;
  }

  .lead {
    font-size: 1.2rem;
    color: var(--ink-soft);
    max-width: 58ch;
    margin-bottom: 48px;
  }

  /* Philosophy */
  .philosophy-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 80px;
    align-items: start;
  }

  .philosophy-copy p + p {
    margin-top: 20px;
  }

  .philosophy-copy p {
    color: var(--ink-soft);
    font-size: 1.05rem;
  }

  .philosophy-aside {
    background: var(--ink);
    color: var(--paper);
    padding: 36px;
    border-radius: 12px;
    box-shadow: var(--shadow);
  }

  .philosophy-aside h3 {
    font-size: 1.6rem;
    margin-bottom: 16px;
  }

  .philosophy-aside p {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 16px;
    font-size: 0.95rem;
  }

  .stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.12);
    padding-top: 24px;
  }

  .stat-number {
    font-family: var(--mono);
    font-size: 1.8rem;
    color: var(--brass);
  }

  .stat-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.55);
  }

  /* Models */
  .models-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 28px;
  }

  .model-card {
    background: var(--paper-light);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 36px;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s, box-shadow 0.2s;
  }

  .model-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
  }

  .model-icon {
    width: 56px;
    height: 56px;
    margin-bottom: 24px;
    color: var(--brass);
  }

  .model-card h3 {
    font-size: 1.5rem;
    margin-bottom: 8px;
  }

  .model-card p {
    color: var(--ink-soft);
    font-size: 0.95rem;
    margin-bottom: 24px;
  }

  .model-specs {
    list-style: none;
    border-top: 1px solid var(--line);
    margin-bottom: 24px;
    padding-top: 16px;
    font-size: 0.9rem;
    color: var(--muted);
  }

  .model-specs li {
    padding: 4px 0;
    display: flex;
    justify-content: space-between;
    gap: 12px;
  }

  .model-specs strong {
    color: var(--ink);
  }

  .model-price {
    margin-top: auto;
    font-family: var(--mono);
    font-size: 1.2rem;
    color: var(--brass-dark);
    font-weight: 600;
  }

  .model-price small {
    font-family: var(--sans);
    font-weight: 400;
    color: var(--muted);
    font-size: 0.85rem;
  }

  .model-link {
    margin-top: 16px;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    color: var(--brass);
    display: inline-block;
  }

  .model-link:hover {
    color: var(--brass-dark);
  }

  /* Process */
  .process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
  }

  .process-step {
    position: relative;
  }

  .process-step::after {
    content: "";
    position: absolute;
    top: 24px;
    left: -20px;
    width: 40px;
    height: 1px;
    background: var(--line);
  }

  .process-step:first-child::after {
    display: none;
  }

  .step-number {
    font-family: var(--serif);
    font-size: 3rem;
    color: var(--brass);
    line-height: 1;
    display: block;
    margin-bottom: 16px;
  }

  .process-step h3 {
    font-size: 1.2rem;
    margin-bottom: 8px;
  }

  .process-step p {
    font-size: 0.95rem;
    color: var(--ink-soft);
  }

  /* Testimonials */
  .quotes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 32px;
  }

  .quote-card {
    background: var(--paper-light);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 36px;
    display: flex;
    flex-direction: column;
  }

  blockquote {
    font-family: var(--serif);
    font-size: 1.2rem;
    line-height: 1.5;
    color: var(--ink);
    margin-bottom: 24px;
    flex: 1;
  }

  .quote-author {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--ink-soft);
  }

  .quote-author small {
    display: block;
    font-weight: 400;
    color: var(--muted);
    margin-top: 4px;
  }

  /* Craft / Materials */
  .craft-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 32px;
  }

  .craft-item {
    padding: 32px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 12px;
  }

  .craft-icon {
    width: 40px;
    height: 40px;
    color: var(--brass);
    margin-bottom: 20px;
  }

  .craft-item h3 {
    font-size: 1.3rem;
    margin-bottom: 12px;
  }

  .craft-item p {
    font-size: 0.95rem;
    color: var(--ink-soft);
  }

  /* Visit */
  .visit-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 60px;
    align-items: start;
  }

  .visit-info address {
    font-style: normal;
    margin-top: 20px;
    line-height: 1.8;
    color: var(--ink-soft);
  }

  .visit-info .lead {
    margin-bottom: 24px;
  }

  .visit-hours {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
  }

  .visit-hours li {
    list-style: none;
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 0.95rem;
    color: var(--ink-soft);
  }

  .visit-hours li strong {
    color: var(--ink);
  }

  .visit-map {
    position: relative;
    background: var(--ink);
    border-radius: 16px;
    min-height: 360px;
    overflow: hidden;
    color: rgba(255,255,255,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow);
  }

  .visit-map::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
    background-size: 40px 40px;
  }

  .map-pin {
    position: relative;
    text-align: center;
    font-size: 0.9rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
  }

  .map-pin svg {
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    color: var(--brass);
  }

  /* FAQ */
  .faq-list {
    max-width: 780px;
  }

  .faq-list details {
    border-bottom: 1px solid var(--line);
  }

  .faq-list summary {
    cursor: pointer;
    list-style: none;
    padding: 24px 0;
    font-weight: 600;
    font-size: 1.05rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
  }

  .faq-list summary::-webkit-details-marker {
    display: none;
  }

  .faq-list summary::after {
    content: "+";
    font-family: var(--sans);
    font-size: 1.6rem;
    color: var(--brass);
    font-weight: 400;
    line-height: 1;
  }

  .faq-list details[open] summary::after {
    content: "–";
  }

  .faq-content {
    padding: 0 0 24px;
    color: var(--ink-soft);
    max-width: 58ch;
  }

  /* CTA */
  .cta-section {
    background: var(--ink);
    color: #fff;
    text-align: center;
    padding: 100px 0;
  }

  .cta-section h2 {
    color: #fff;
    margin-bottom: 16px;
  }

  .cta-section p {
    color: rgba(255,255,255,0.7);
    max-width: 48ch;
    margin: 0 auto 32px;
  }

  .cta-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
  }

  /* Newsletter */
  .newsletter-form {
    display: flex;
    gap: 12px;
    max-width: 440px;
    margin: 32px auto 0;
    flex-wrap: wrap;
  }

  .newsletter-form input[type="email"] {
    flex: 1;
    min-width: 220px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 6px;
    color: #fff;
    padding: 12px 16px;
    font-family: var(--sans);
    font-size: 1rem;
    outline: none;
  }

  .newsletter-form input[type="email"]::placeholder {
    color: rgba(255,255,255,0.45);
  }

  .newsletter-form input[type="email"]:focus {
    border-color: var(--brass);
  }

  .newsletter-status {
    margin-top: 16px;
    font-size: 0.9rem;
    color: var(--brass);
    width: 100%;
  }

  /* Footer */
  .site-footer {
    background: var(--ink);
    color: rgba(255,255,255,0.6);
    padding: 48px 0 40px;
    border-top: 1px solid rgba(255,255,255,0.08);
  }

  .footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 48px;
    margin-bottom: 48px;
  }

  .footer-brand .logo {
    color: #fff;
    margin-bottom: 16px;
  }

  .footer-brand p {
    font-size: 0.9rem;
    max-width: 30ch;
  }

  .footer-col h4 {
    color: #fff;
    font-family: var(--sans);
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 20px;
    font-weight: 600;
  }

  .footer-col ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 0.95rem;
  }

  .footer-col a {
    text-decoration: none;
    transition: color 0.2s;
  }

  .footer-col a:hover {
    color: var(--brass);
  }

  .footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 24px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 16px;
    font-size: 0.85rem;
  }

  /* Reveal animation */
  .reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s, transform 0.8s;
  }

  .reveal.visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* Responsive */
  @media (max-width: 900px) {
    .nav-links {
      display: none;
    }

    .menu-toggle {
      display: flex;
    }

    .hero-grid {
      grid-template-columns: 1fr;
      gap: 48px;
    }

    .hero {
      padding: 80px 0 64px;
    }

    .hero-svg {
      max-width: 520px;
    }

    .philosophy-grid {
      grid-template-columns: 1fr;
      gap: 48px;
    }

    .process-grid {
      grid-template-columns: 1fr 1fr;
      gap: 32px;
    }

    .process-step::after {
      display: none;
    }

    .visit-grid {
      grid-template-columns: 1fr;
      gap: 48px;
    }

    .footer-grid {
      grid-template-columns: 1fr 1fr;
      gap: 32px;
    }
  }

  @media (max-width: 600px) {
    .section {
      padding: 64px 0;
    }

    .process-grid {
      grid-template-columns: 1fr;
    }

    .stat-grid {
      grid-template-columns: 1fr;
    }

    .footer-grid {
      grid-template-columns: 1fr;
      gap: 24px;
    }
  }
</style>
</head>
<body>

<header class="site-header">
  <div class="container nav-inner">
    <a href="#" class="logo" aria-label="Lumen Cycles home">
      <svg class="logo-mark" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
        <circle cx="17" cy="17" r="15" stroke="currentColor" stroke-width="2"/>
        <circle cx="17" cy="17" r="6" stroke="currentColor" stroke-width="2"/>
        <path d="M17 2v6M17 26v6M2 17h6M26 17h6" stroke="currentColor" stroke-width="2"/>
      </svg>
      <span>Lumen Cycles</span>
    </a>

    <nav aria-label="Primary">
      <ul class="nav-links">
        <li><a href="#models">Models</a></li>
        <li><a href="#process">Process</a></li>
        <li><a href="#workshop">Workshop</a></li>
        <li><a href="#faq">FAQ</a></li>
        <li><a href="#contact" class="btn btn-dark nav-cta">Start your build</a></li>
      </ul>
    </nav>

    <button class="menu-toggle" id="menuToggle" aria-label="Open menu" aria-expanded="false">
      <span></span><span></span><span></span>
    </button>
  </div>

  <div class="mobile-menu" id="mobileMenu">
    <ul>
      <li><a href="#models">Models</a></li>
      <li><a href="#process">Process</a></li>
      <li><a href="#workshop">Workshop</a></li>
      <li><a href="#faq">FAQ</a></li>
      <li><a href="#contact" class="btn btn-dark">Start your build</a></li>
    </ul>
  </div>
</header>

<main>
  <!-- Hero -->
  <section class="hero">
    <div class="container hero-grid">
      <div>
        <div class="hero-eyebrow">Custom cargo bikes · Copenhagen</div>
        <h1>Built for a lifetime, made to your measure.</h1>
        <p>Each Lumen is designed from a blank drawing, cut by hand, and assembled by a single builder in our Copenhagen workshop.</p>
        <div class="hero-buttons">
          <a href="#contact" class="btn btn-primary">Start your build</a>
          <a href="#process" class="btn btn-secondary">Explore the process</a>
        </div>
      </div>

      <div class="hero-svg">
        <svg viewBox="0 0 640 420" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Technical drawing of a cargo bike">
          <g stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
            <!-- Rear wheel -->
            <circle cx="500" cy="300" r="55"/>
            <circle cx="500" cy="300" r="5"/>
            <path d="M445 300h110M500 245v110M461 261l78 78M539 261l-78 78"/>
            <!-- Front wheel -->
            <circle cx="150" cy="300" r="55"/>
            <circle cx="150" cy="300" r="5"/>
            <path d="M95 300h110M150 245v110M111 261l78 78M189 261l-78 78"/>
            <!-- Head tube and fork -->
            <path d="M150 160v110M150 270v30" stroke-width="3.5"/>
            <!-- Top spine -->
            <path d="M150 160h350V170 160l30 120" stroke-width="3.5"/>
            <!-- Seat tube and stays -->
            <path d="M500 160l15 120-15 20M530 280l-30 20M530 280l-30 40"/>
            <!-- Handlebar -->
            <path d="M150 160c-20-25-10-40 10-45" stroke-width="3.5"/>
            <!-- Saddle -->
            <path d="M490 130c10-10 40-10 50 0M515 130v30" stroke-width="3.5"/>
            <!-- Cargo box details -->
            <path d="M175 165h320M175 190h320M175 165v25M495 165v25M285 165v25M395 165v25"/>
            <!-- Dimension lines -->
            <path d="M150 118h350M142 118v12M500 118v12" stroke-width="1.5" stroke-dasharray="4 4"/>
          </g>
          <g fill="currentColor" font-family="ui-monospace, monospace" font-size="11" letter-spacing="0.5">
            <text x="270" y="112">1,220 mm</text>
            <text x="200" y="380">BB height 270 mm</text>
            <text x="420" y="390">Load 150–200 kg</text>
          </g>
        </svg>
      </div>
    </div>

    <div class="container">
      <div class="hero-note">
        <span>
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2C6.5 6 4 10 4 15c0 4 3.5 7 8 7s8-3 8-7c0-5-2.5-9-8-13z"/></svg>
          Frame warranty: 10 years
        </span>
        <span>
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M8 12l3 3 5-6"/></svg>
          Free EU shipping
        </span>
        <span>
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 17l6-6 4 4 8-8"/><path d="M14 7h7v7"/></svg>
          Trade-in and upgrade program
        </span>
      </div>
    </div>
  </section>

  <!-- Trust bar -->
  <section class="trust-bar">
    <div class="container">
      <ul class="trust-list">
        <li>
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
          Built in Nørrebro, Copenhagen
        </li>
        <li>
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.8 4.6a5.5 5.5 0 00-7.7 0L12 5.7l-1.1-1.1a5.5 5.5 0 00-7.7 7.7l1.1 1.1 7.7 7.7 7.7-7.7 1.1-1.1a5.5 5.5 0 000-7.7z"/></svg>
          Handcrafted, no robots
        </li>
        <li>
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 12v8a2 2 0 01-2 2H6a2 2 0 01-2-2v-8"/><path d="M16 6l-4-4-4 4"/><path d="M12 2v16"/></svg>
          Made to order, 4–6 weeks
        </li>
        <li>
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
          Lifetime support &amp; service
        </li>
      </ul>
    </div>
  </section>

  <!-- Philosophy -->
  <section class="section" id="philosophy">
    <div class="container philosophy-grid">
      <div class="philosophy-copy">
        <div class="section-label">Why Lumen</div>
        <h2>A cargo bike is a tool, a sculpture, and a family member.</h2>
        <p>In a world of mass-produced machines, we believe a cargo bike should be as deliberate as its owner. Every Lumen is designed from a blank sheet of paper, fabricated in our own workshop, and finished by the same pair of hands from first cut to final test ride.</p>
        <p>We use Reynolds 725 steel, drawn and butted in England. We choose every bearing, bolt and brake by hand. And we offer no “standard models” — only starting points for exactly the bike you need.</p>
        <p>This is slow manufacturing in the best sense: around 250 bikes a year, each one a real collaboration.</p>
      </div>

      <aside class="philosophy-aside">
        <h3>Lumen in numbers</h3>
        <p>Since 2012, we have built cargo bikes for couriers, families, architects and bakers. Nearly all of them are still on the road.</p>
        <div class="stat-grid">
          <div>
            <div class="stat-number" data-target="12">0</div>
            <div class="stat-label">Years of building</div>
          </div>
          <div>
            <div class="stat-number" data-target="550">0</div>
            <div class="stat-label">Bikes delivered</div>
          </div>
          <div>
            <div class="stat-number" data-target="98">0</div>
            <div class="stat-label">% still in use</div>
          </div>
        </div>
      </aside>
    </div>
  </section>

  <!-- Models -->
  <section class="section section-alt" id="models">
    <div class="container">
      <div class="section-label">The Lineup</div>
      <h2>Three starting points. Infinite possibilities.</h2>
      <p class="lead">Every model can be adjusted in more than forty ways: wheel size, drivetrain, cargo box, electric assist, colour, and detail. Prices shown are complete bikes with painted frame, racks, boxes and one year of service included.</p>

      <div class="models-grid">
        <article class="model-card reveal">
          <svg class="model-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="5" cy="17" r="4"/><circle cx="19" cy="17" r="4"/><path d="M9 17h6M5 17L3 8h5l2 9M19 17l-2-9h-5M15 8H9M3 8h5M15 8l2 9"/></svg>
          <h3>The Urban</h3>
          <p>A compact, agile cargo bike for daily rides and quick errands.</p>
          <ul class="model-specs">
            <li><span>Payload</span><strong>120 kg</strong></li>
            <li><span>Platform</span><strong>580 mm</strong></li>
            <li><span>Wheels</span><strong>26" / 20"</strong></li>
            <li><span>Drivetrain</span><strong>Belt or chain</strong></li>
          </ul>
          <div class="model-price">from €3,950 <small>incl. VAT</small></div>
          <a href="#contact" class="model-link">Configure yours →</a>
        </article>

        <article class="model-card reveal">
          <svg class="model-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="5" cy="17" r="4"/><circle cx="19" cy="17" r="4"/><path d="M9 17h6M5 17L3 8h5l2 9M19 17l-2-9h-5M15 8H9M3 8h5M15 8l2 9"/><path d="M7 8l1-3h8l1 3"/></svg>
          <h3>The Family</h3>
          <p>Our bestseller for the school run, weekly shopping, and weekend trips.</p>
          <ul class="model-specs">
            <li><span>Payload</span><strong>180 kg</strong></li>
            <li><span>Platform</span><strong>780 mm</strong></li>
            <li><span>Wheels</span><strong>26" / 20"</strong></li>
            <li><span>E-assist</span><strong>Shimano EP8</strong></li>
          </ul>
          <div class="model-price">from €4,950 <small>incl. VAT</small></div>
          <a href="#contact" class="model-link">Configure yours →</a>
        </article>

        <article class="model-card reveal">
          <svg class="model-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="5" cy="17" r="4"/><circle cx="19" cy="17" r="4"/><path d="M9 17h6M5 17L3 8h5l2 9M19 17l-2-9h-5M15 8H9M3 8h5M15 8l2 9"/><path d="M16 5l3 3M15 6l3-3"/></svg>
          <h3>The Transport</h3>
          <p>Heavy, rugged, and designed for daily freight work.</p>
          <ul class="model-specs">
            <li><span>Payload</span><strong>250 kg</strong></li>
            <li><span>Platform</span><strong>1,000 mm</strong></li>
            <li><span>Wheels</span><strong>26" / 24"</strong></li>
            <li><span>Brakes</span><strong>Hydraulic, 4-piston</strong></li>
          </ul>
          <div class="model-price">from €5,750 <small>incl. VAT</small></div>
          <a href="#contact" class="model-link">Configure yours →</a>
        </article>
      </div>
    </div>
  </section>

  <!-- Process -->
  <section class="section" id="process">
    <div class="container">
      <div class="section-label">How it's made</div>
      <h2>From first sketch to first ride.</h2>
      <p class="lead">We keep the process personal. You talk directly with the builder who will assemble your bike.</p>

      <div class="process-grid">
        <div class="process-step reveal">
          <span class="step-number">01</span>
          <h3>Consultation</h3>
          <p>We meet at the workshop or online. We discuss how you ride, what you carry, and where you park.</p>
        </div>
        <div class="process-step reveal">
          <span class="step-number">02</span>
          <h3>Design</h3>
          <p>Your geometry is drawn and reviewed. You choose every component, colour, and finishing detail.</p>
        </div>
        <div class="process-step reveal">
          <span class="step-number">03</span>
          <h3>Build</h3>
          <p>Your frame is cut, welded, heat-treated, and painted. Assembly is done by a single builder.</p>
        </div>
        <div class="process-step reveal">
          <span class="step-number">04</span>
          <h3>Delivery</h3>
          <p>We test ride every bike for 25 km. You pick it up in person, or we ship it anywhere in the EU.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Testimonials -->
  <section class="section section-alt">
    <div class="container">
      <div class="section-label">Riders</div>
      <h2>Trusted by families, couriers, and fanatics.</h2>
      <div class="quotes-grid">
        <div class="quote-card reveal">
          <blockquote>“Our Lumen replaced a second car. Four weeks in, both kids call it the magic bus. It is absurdly beautiful and absurdly functional.”</blockquote>
          <div class="quote-author">Mette K.<small>Copenhagen, Denmark</small></div>
        </div>
        <div class="quote-card reveal">
          <blockquote>“As a courier, I’ve ridden everything. Nothing feels as planted or as precise as my Lumen. I know exactly where every gram went.”</blockquote>
          <div class="quote-author">Emil H.<small>Malmö, Sweden</small></div>
        </div>
        <div class="quote-card reveal">
          <blockquote>“It is the only purchase I’ve ever made that gets more beautiful every year. The patina on the brass and the steel is unreal.”</blockquote>
          <div class="quote-author">Sanna T.<small>Aarhus, Denmark</small></div>
        </div>
      </div>
    </div>
  </section>

  <!-- Craft / materials -->
  <section class="section">
    <div class="container">
      <div class="section-label">Materials &amp; Detail</div>
      <h2>No compromises, no catalogue parts.</h2>
      <div class="craft-grid">
        <div class="craft-item reveal">
          <svg class="craft-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="7" width="18" height="10" rx="2"/><path d="M7 7V5h4v2M13 7V5h4v2M3 10h18M9 13h6"/></svg>
          <h3>Reynolds 725 Steel</h3>
          <p>Air-hardened, double-butted steel. It can be repaired anywhere in the world and rides beautifully forever.</p>
        </div>
        <div class="craft-item reveal">
          <svg class="craft-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7h16v10H4z"/><path d="M7 7V4h10v3M12 7v10"/><path d="M9 12h6"/></svg>
          <h3>Hand-Painted Frames</h3>
          <p>Powdercoat, wet paint, or bare oiled steel. We mix custom colours in small batches and hand-brush details.</p>
        </div>
        <div class="craft-item reveal">
          <svg class="craft-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M19.1 4.9L17 7M7 17l-2.1 2.1"/></svg>
          <h3>Machined Details</h3>
          <p>Hubs, head badges, and cargo box latches are machined in-house from stainless steel and brass.</p>
        </div>
        <div class="craft-item reveal">
          <svg class="craft-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
          <h3>Designed for Service</h3>
          <p>Every component is standard, accessible, and replaceable. We publish full technical diagrams for your bike.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Visit / workshop -->
  <section class="section section-alt" id="workshop">
    <div class="container visit-grid">
      <div class="visit-info">
        <div class="section-label">The Workshop</div>
        <h2>Come see the bikes being made.</h2>
        <p class="lead">We’re an open workshop. Drop in for a coffee, look at the jigs, or take a test ride on a Lumen.</p>
        <address>
          <strong>Lumen Cycles ApS</strong><br>
          Skudehavnsvej 27<br>
          2150 Nordhavn, Copenhagen<br>
          Denmark<br>
          <a href="mailto:hello@lumencycles.dk" style="color:var(--brass); text-decoration:none;">hello@lumencycles.dk</a><br>
          +45 22 00 00 00
        </address>
        <ul class="visit-hours">
          <li><strong>Wednesday–Friday</strong><span>10:00–18:00</span></li>
          <li><strong>Saturday</strong><span>10:00–16:00</span></li>
          <li><strong>Sunday–Tuesday</strong><span>By appointment</span></li>
        </ul>
      </div>

      <div class="visit-map">
        <div class="map-pin">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 1116 0z"/><circle cx="12" cy="10" r="3"/></svg>
          <span>Nordhavn, Copenhagen</span>
        </div>
      </div>
    </div>
  </section>

  <!-- FAQ -->
  <section class="section" id="faq">
    <div class="container">
      <div class="section-label">Questions</div>
      <h2>Everything you might want to know.</h2>
      <div class="faq-list">
        <details>
          <summary>How long does a build take?</summary>
          <div class="faq-content">
            <p>From confirmed design to delivery is typically 4–6 weeks. Bikes with electric assist or custom paint can take 6–8 weeks. We’ll give you a fixed date before you place the order.</p>
          </div>
        </details>
        <details>
          <summary>Can I test ride before ordering?</summary>
          <div class="faq-content">
            <p>Yes. We keep three demo bikes in the workshop at all times. You can also ask to borrow one for a day — we only ask that you fill it with something heavy.</p>
          </div>
        </details>
        <details>
          <summary>Do you ship outside Denmark?</summary>
          <div class="faq-content">
            <p>We ship to all EU countries at no cost. Bikes are carefully crated and insured during transport. For countries outside the EU, we can arrange shipping on request.</p>
          </div>
        </details>
        <details>
          <summary>What is the warranty?</summary>
          <div class="faq-content">
            <p>Our frames carry a 10-year warranty. All original parts are covered for 2 years. We also offer a lifetime repair discount for Lumen owners — and we mean lifetime.</p>
          </div>
        </details>
        <details>
          <summary>Can I bring my existing cargo bike for repair?</summary>
          <div class="faq-content">
            <p>We service many brands of cargo bikes, but priority is given to Lumen frame owners. If you’re thinking about upgrading, we offer a trade-in assessment.</p>
          </div>
        </details>
      </div>
    </div>
  </section>

  <!-- CTA + Contact -->
  <section class="cta-section" id="contact">
    <div class="container">
      <div class="section-label" style="color:var(--brass);">Start your build</div>
      <h2>Tell us what you need. We’ll draw the rest.</h2>
      <p>Book a free consultation in the workshop or online. We’ll ask the right questions and send you a design proposal within a week.</p>
      <div class="cta-buttons">
        <a href="mailto:hello@lumencycles.dk" class="btn btn-primary">Email us directly</a>
        <a href="#workshop" class="btn btn-secondary">Visit the workshop</a>
      </div>

      <form class="newsletter-form" id="newsletterForm">
        <input type="email" name="email" placeholder="Your email address" aria-label="Email address" required>
        <button type="submit" class="btn btn-primary">Notify me</button>
        <div class="newsletter-status" id="newsletterStatus" role="status"></div>
      </form>
    </div>
  </section>
</main>

<footer class="site-footer">
  <div class="container">
    <div class="footer-grid">
      <div class="footer-brand">
        <a href="#" class="logo">
          <svg class="logo-mark" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="17" cy="17" r="15" stroke="currentColor" stroke-width="2"/>
            <circle cx="17" cy="17" r="6" stroke="currentColor" stroke-width="2"/>
            <path d="M17 2v6M17 26v6M2 17h6M26 17h6" stroke="currentColor" stroke-width="2"/>
          </svg>
          <span>Lumen Cycles</span>
        </a>
        <p>Hand-built cargo bikes from Copenhagen. Made to order, made to last.</p>
      </div>

      <div class="footer-col">
        <h4>Explore</h4>
        <ul>
          <li><a href="#models">Models</a></li>
          <li><a href="#process">Process</a></li>
          <li><a href="#workshop">Workshop</a></li>
          <li><a href="#faq">FAQ</a></li>
        </ul>
      </div>

      <div class="footer-col">
        <h4>Company</h4>
        <ul>
          <li><a href="#philosophy">Our story</a></li>
          <li><a href="#contact">Contact</a></li>
          <li><a href="#contact">Careers</a></li>
          <li><a href="#contact">Press</a></li>
        </ul>
      </div>

      <div class="footer-col">
        <h4>Legal</h4>
        <ul>
          <li><a href="#">Privacy</a></li>
          <li><a href="#">Terms</a></li>
          <li><a href="#">Cookies</a></li>
          <li><a href="#">Imprint</a></li>
        </ul>
      </div>
    </div>

    <div class="footer-bottom">
      <span>© <span id="year">2025</span> Lumen Cycles ApS. All rights reserved.</span>
      <span>CVR 4210 9988 · Design by the workshop</span>
    </div>
  </div>
</footer>

<script>
  // Mobile menu toggle
  const menuToggle = document.getElementById('menuToggle');
  const mobileMenu = document.getElementById('mobileMenu');

  menuToggle.addEventListener('click', () => {
    const isOpen = mobileMenu.classList.toggle('open');
    menuToggle.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
  });

  // Smooth scroll for anchor links
  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
      const href = this.getAttribute('href');
      if (href.length > 1) {
        const target = document.querySelector(href);
        if (target) {
          e.preventDefault();
          target.scrollIntoView({ behavior: 'smooth', block: 'start' });
          if (mobileMenu.classList.contains('open')) {
            mobileMenu.classList.remove('open');
            menuToggle.setAttribute('aria-expanded', 'false');
          }
        }
      }
    });
  });

  // Reveal on scroll
  const revealObserver = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('visible');
        revealObserver.unobserve(entry.target);
      }
    });
  }, { threshold: 0.15 });

  document.querySelectorAll('.reveal').forEach(el => revealObserver.observe(el));

  // Animated counters
  const counterObserver = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const el = entry.target;
        const target = parseInt(el.getAttribute('data-target'), 10);
        if (isNaN(target)) return;
        let current = 0;
        const increment = Math.max(1, Math.floor(target / 60));
        const timer = setInterval(() => {
          current += increment;
          if (current >= target) {
            current = target;
            clearInterval(timer);
          }
          el.textContent = current;
        }, 16);
        counterObserver.unobserve(el);
      }
    });
  }, { threshold: 0.4 });

  document.querySelectorAll('.stat-number').forEach(el => counterObserver.observe(el));

  // Newsletter form (demo)
  const newsletterForm = document.getElementById('newsletterForm');
  const newsletterStatus = document.getElementById('newsletterStatus');

  if (newsletterForm) {
    newsletterForm.addEventListener('submit', (e) => {
      e.preventDefault();
      newsletterStatus.textContent = 'Thank you — we will be in touch with the next build slot.';
      newsletterForm.reset();
    });
  }

  // Year
  document.getElementById('year').textContent = new Date().getFullYear();
</script>

</body>
</html>

Compare with

Mercury 3: other attempts