hypeorcode
Network offOpen alone (new tab)

Run details

Model
reflection/beam-1.0-501b-a23b
Route
OpenRouter API, one user message
Reasoning
provider default, 1,319 reasoning tokens
Limits
60 min · 600,000 output tokens
Date
21 Oct 2026
Time
39 s
Size
50 kB
Tokens
134 in, 18,243 out
List price
$0.018 ($0.3 in / $1 out per M)
Paid
$0.018

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

50 kB 940 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, handbuilt in Copenhagen</title>
<meta name="description" content="Lumen Cycles builds custom cargo bikes to order in our Copenhagen workshop. Long-john and long-tail models from €3,690. 5-year frame warranty, free delivery in Denmark.">
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='14' fill='%231c1a17'/%3E%3Cpath d='M9 20 L23 20 M12 20 L16 12 L20 20' stroke='%23f4f1ec' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E">
<style>
:root {
  --bg: #f4f1ec;
  --bg-2: #ece7de;
  --surface: #ffffff;
  --ink: #1c1a17;
  --ink-2: #3a3732;
  --muted: #6b665e;
  --line: #ddd6ca;
  --accent: #a86a2a;
  --accent-2: #7a4a1c;
  --sage: #5b6b5a;
  --radius: 14px;
  --radius-lg: 24px;
  --shadow: 0 1px 2px rgba(28,26,23,.04), 0 8px 24px rgba(28,26,23,.06);
  --shadow-lg: 0 2px 4px rgba(28,26,23,.05), 0 24px 60px rgba(28,26,23,.12);
  --max: 1240px;
  --ease: cubic-bezier(.2,.7,.2,1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Helvetica Neue", "Helvetica", "Arial", system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
h1,h2,h3,h4 { font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", "Georgia", serif; font-weight: 500; letter-spacing: -0.01em; margin: 0 0 .5em; line-height: 1.05; }
h1 { font-size: clamp(2.4rem, 5.5vw, 4.6rem); }
h2 { font-size: clamp(2rem, 4vw, 3.2rem); }
h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); }
p { margin: 0 0 1em; }
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; border: none; background: none; }

.container { width: min(var(--max), 100% - 2.5rem); margin-inline: auto; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  background: rgba(244,241,236,.78);
  border-bottom: 1px solid rgba(28,26,23,.06);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: .9rem 0; gap: 1.5rem; }
.brand { display: flex; align-items: center; gap: .6rem; font-weight: 600; letter-spacing: .02em; }
.brand-mark { width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--bg); display: grid; place-items: center; font-family: serif; font-size: 1.1rem; font-weight: 600; }
.brand-name { font-size: 1.05rem; }
.brand-name small { display: block; font-size: .62rem; font-weight: 400; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-top: -2px; }
nav.primary { display: flex; gap: 1.6rem; align-items: center; }
nav.primary a { font-size: .92rem; color: var(--ink-2); transition: color .2s; }
nav.primary a:hover { color: var(--accent); }
.nav-cta { background: var(--ink); color: var(--bg) !important; padding: .6rem 1.1rem; border-radius: 999px; font-size: .88rem !important; transition: background .2s, transform .2s; }
.nav-cta:hover { background: var(--accent); transform: translateY(-1px); }
.menu-toggle { display: none; width: 40px; height: 40px; border-radius: 10px; align-items: center; justify-content: center; }
.menu-toggle span { display: block; width: 20px; height: 2px; background: var(--ink); position: relative; }
.menu-toggle span::before, .menu-toggle span::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--ink); transition: .3s; }
.menu-toggle span::before { top: -6px; }
.menu-toggle span::after { top: 6px; }
.menu-toggle.open span { background: transparent; }
.menu-toggle.open span::before { top: 0; transform: rotate(45deg); }
.menu-toggle.open span::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 820px) {
  nav.primary { position: fixed; inset: 64px 1rem auto 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem; flex-direction: column; align-items: stretch; gap: .2rem; transform: translateY(-120%); transition: transform .3s var(--ease); box-shadow: var(--shadow-lg); }
  nav.primary.open { transform: translateY(0); }
  nav.primary a { padding: .7rem .6rem; border-radius: 8px; }
  nav.primary a:hover { background: var(--bg); }
  .menu-toggle { display: flex; }
}

/* ---------- Hero ---------- */
.hero { padding: 4.5rem 0 3rem; position: relative; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 3rem; align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: .6rem; font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.4rem; }
.eyebrow::before { content: ""; width: 34px; height: 1px; background: var(--muted); }
.hero h1 em { font-style: italic; color: var(--accent); }
.hero-lead { font-size: 1.15rem; color: var(--ink-2); max-width: 52ch; margin-bottom: 2rem; }
.hero-ctas { display: flex; gap: .8rem; flex-wrap: wrap; margin-bottom: 2rem; }
.btn { display: inline-flex; align-items: center; gap: .5rem; padding: .95rem 1.5rem; border-radius: 999px; font-size: .95rem; font-weight: 500; transition: transform .2s var(--ease), background .2s, box-shadow .2s; }
.btn-primary { background: var(--ink); color: var(--bg); box-shadow: 0 6px 18px rgba(28,26,23,.18); }
.btn-primary:hover { background: var(--accent); transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn-ghost:hover { border-color: var(--ink); transform: translateY(-2px); }
.hero-meta { display: flex; gap: 2rem; flex-wrap: wrap; font-size: .85rem; color: var(--muted); }
.hero-meta strong { color: var(--ink); font-weight: 600; }
.hero-art { position: relative; aspect-ratio: 4/3; }
.bike-card {
  background: linear-gradient(160deg, #ffffff 0%, #ece7de 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}
.bike-card::after {
  content: ""; position: absolute; inset: auto -20% -30% auto; width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(168,106,42,.18), transparent 70%); pointer-events: none;
}
.bike-svg { width: 100%; height: auto; }
.bike-color-dot { --c: #1c1a17; }
.config-swatches { display: flex; gap: .5rem; margin-top: 1rem; }
.swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: transform .2s, border-color .2s; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.swatch:hover { transform: scale(1.08); }
.swatch.active { border-color: var(--ink); transform: scale(1.12); }
.swatch-label { font-size: .78rem; color: var(--muted); margin-top: .6rem; }
.config-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; }
.config-price { font-family: serif; font-size: 1.6rem; font-weight: 500; }
.config-price small { font-size: .7rem; color: var(--muted); font-family: sans-serif; letter-spacing: .1em; text-transform: uppercase; display: block; }

/* ---------- Trust bar ---------- */
.trust { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1.6rem 0; background: var(--surface); }
.trust-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.trust-label { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.trust-logos { display: flex; gap: 2.4rem; flex-wrap: wrap; align-items: center; }
.trust-logos span { font-family: serif; font-size: 1.05rem; color: var(--muted); opacity: .7; letter-spacing: .02em; }

/* ---------- Section base ---------- */
section { padding: 5.5rem 0; }
.section-head { max-width: 720px; margin-bottom: 3rem; }
.section-head .eyebrow { margin-bottom: 1rem; }
.section-head p { color: var(--muted); font-size: 1.05rem; }

/* ---------- Models ---------- */
.models-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.model-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 1.6rem; transition: transform .3s var(--ease), box-shadow .3s; position: relative; overflow: hidden;
}
.model-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.model-card.featured { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.model-card.featured .model-meta, .model-card.featured .model-price small { color: rgba(244,241,236,.7); }
.model-badge { position: absolute; top: 1.2rem; right: 1.2rem; font-size: .7rem; letter-spacing: .15em; text-transform: uppercase; padding: .3rem .7rem; border-radius: 999px; background: var(--accent); color: #fff; }
.model-card.featured .model-badge { background: var(--accent); }
.model-illustration { aspect-ratio: 16/9; margin-bottom: 1.2rem; display: grid; place-items: center; }
.model-illustration svg { width: 100%; height: 100%; }
.model-name { font-size: 1.5rem; margin-bottom: .2rem; }
.model-tag { color: var(--muted); font-size: .9rem; margin-bottom: 1rem; }
.model-card.featured .model-tag { color: rgba(244,241,236,.7); }
.model-specs { list-style: none; padding: 0; margin: 0 0 1.4rem; font-size: .9rem; }
.model-specs li { display: flex; justify-content: space-between; padding: .55rem 0; border-bottom: 1px solid var(--line); }
.model-card.featured .model-specs li { border-color: rgba(244,241,236,.12); }
.model-specs li span:first-child { color: var(--muted); }
.model-card.featured .model-specs li span:first-child { color: rgba(244,241,236,.6); }
.model-price { font-family: serif; font-size: 2rem; font-weight: 500; margin-bottom: 1rem; display: flex; align-items: baseline; gap: .4rem; }
.model-price small { font-size: .75rem; color: var(--muted); font-family: sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.model-cta { display: block; text-align: center; padding: .85rem; border-radius: 10px; background: var(--bg-2); color: var(--ink); font-weight: 500; transition: background .2s; }
.model-card.featured .model-cta { background: rgba(244,241,236,.12); color: var(--bg); }
.model-cta:hover { background: var(--accent); color: #fff; }
@media (max-width: 900px) { .models-grid { grid-template-columns: 1fr; } }

/* ---------- Why / features ---------- */
.features { background: var(--surface); }
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4rem; }
.feature { padding-top: 1.4rem; border-top: 1px solid var(--line); }
.feature-num { font-family: serif; font-size: 1rem; color: var(--accent); margin-bottom: .8rem; }
.feature h3 { font-size: 1.25rem; margin-bottom: .5rem; }
.feature p { color: var(--muted); font-size: .95rem; }
@media (max-width: 900px) { .features-grid { grid-template-columns: 1fr; } }

/* ---------- Process ---------- */
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; counter-reset: step; }
.step { position: relative; padding-top: 2.4rem; }
.step::before { content: "0" counter(step); counter-increment: step; position: absolute; top: 0; left: 0; font-family: serif; font-size: 2.4rem; color: var(--line); font-weight: 500; }
.step h3 { font-size: 1.2rem; margin-bottom: .5rem; }
.step p { color: var(--muted); font-size: .92rem; }
.step-time { display: inline-block; margin-top: .8rem; font-size: .75rem; letter-spacing: .15em; text-transform: uppercase; color: var(--accent); }
@media (max-width: 900px) { .process-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .process-grid { grid-template-columns: 1fr; } }

/* ---------- Craft ---------- */
.craft { background: var(--ink); color: var(--bg); }
.craft-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.craft .section-head { margin-bottom: 1.6rem; }
.craft .section-head p { color: rgba(244,241,236,.72); }
.craft h2 { color: var(--bg); }
.craft p { color: rgba(244,241,236,.78); }
.craft-list { list-style: none; padding: 0; margin: 1.6rem 0 0; }
.craft-list li { display: flex; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid rgba(244,241,236,.12); }
.craft-list li:last-child { border-bottom: none; }
.craft-list strong { display: block; color: var(--bg); margin-bottom: .2rem; font-weight: 500; }
.craft-list span { color: rgba(244,241,236,.65); font-size: .9rem; }
.craft-visual { aspect-ratio: 4/5; border-radius: var(--radius-lg); overflow: hidden; position: relative; background: linear-gradient(135deg, #2a2722 0%, #1c1a17 100%); }
.craft-visual svg { width: 100%; height: 100%; }
.craft-stat { position: absolute; bottom: 1.6rem; left: 1.6rem; background: rgba(244,241,236,.08); backdrop-filter: blur(8px); padding: 1rem 1.2rem; border-radius: 12px; border: 1px solid rgba(244,241,236,.12); }
.craft-stat strong { font-family: serif; font-size: 2rem; display: block; color: var(--bg); }
.craft-stat span { font-size: .78rem; color: rgba(244,241,236,.7); letter-spacing: .1em; text-transform: uppercase; }
@media (max-width: 900px) { .craft-grid { grid-template-columns: 1fr; gap: 2.5rem; } }

/* ---------- Specs ---------- */
.specs-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.specs-table th, .specs-table td { padding: 1rem 1.2rem; text-align: left; border-bottom: 1px solid var(--line); }
.specs-table th { font-weight: 500; color: var(--muted); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; background: var(--bg-2); }
.specs-table td:first-child { font-weight: 500; }
.specs-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); }

/* ---------- Testimonials ---------- */
.testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.quote { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 2rem; display: flex; flex-direction: column; }
.quote-mark { font-family: serif; font-size: 3rem; color: var(--accent); line-height: 1; margin-bottom: .4rem; }
.quote p { font-family: serif; font-size: 1.15rem; line-height: 1.45; margin-bottom: 1.6rem; flex: 1; }
.quote-author { display: flex; align-items: center; gap: .8rem; }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--bg-2); display: grid; place-items: center; font-family: serif; font-size: 1rem; color: var(--ink); }
.quote-author strong { display: block; font-size: .92rem; }
.quote-author span { font-size: .8rem; color: var(--muted); }
@media (max-width: 900px) { .testimonials-grid { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.faq { background: var(--surface); }
.faq-list { max-width: 820px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { list-style: none; cursor: pointer; padding: 1.4rem 0; display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-weight: 500; font-size: 1.05rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-family: serif; font-size: 1.6rem; color: var(--accent); transition: transform .3s; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { color: var(--muted); padding-bottom: 1.4rem; max-width: 68ch; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
.contact-info h2 { margin-bottom: 1rem; }
.contact-info p { color: var(--muted); }
.contact-block { margin-top: 1.8rem; }
.contact-block strong { display: block; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: .4rem; }
.contact-block a, .contact-block span { font-size: 1.05rem; }
.contact-block a:hover { color: var(--accent); }
.form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 2rem; box-shadow: var(--shadow); }
.field { margin-bottom: 1rem; }
.field label { display: block; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: .4rem; }
.field input, .field select, .field textarea {
  width: 100%; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg); font: inherit; color: var(--ink); transition: border-color .2s, background .2s;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); background: #fff; }
.field textarea { min-height: 120px; resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form .btn { width: 100%; justify-content: center; margin-top: .6rem; }
.form-note { font-size: .78rem; color: var(--muted); margin-top: .8rem; text-align: center; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
footer { background: var(--ink); color: var(--bg); padding: 4rem 0 2rem; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2.4rem; }
.footer-brand p { color: rgba(244,241,236,.65); font-size: .9rem; max-width: 34ch; }
footer h4 { font-family: sans-serif; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(244,241,236,.5); margin-bottom: 1rem; font-weight: 500; }
footer ul { list-style: none; padding: 0; margin: 0; }
footer li { margin-bottom: .6rem; }
footer a { color: rgba(244,241,236,.8); font-size: .9rem; transition: color .2s; }
footer a:hover { color: var(--accent); }
.footer-bottom { border-top: 1px solid rgba(244,241,236,.12); margin-top: 3rem; padding-top: 1.6rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .8rem; color: rgba(244,241,236,.5); }
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Misc ---------- */
.divider { height: 1px; background: var(--line); margin: 0; }
.kbd { font-family: monospace; font-size: .8rem; padding: .1rem .4rem; border: 1px solid var(--line); border-radius: 4px; background: var(--bg-2); }

/* bike color css var */
#heroBike { --bike: #1c1a17; }
#heroBike .frame { stroke: var(--bike); }
#heroBike .box { fill: var(--bike); }
</style>
</head>
<body>

<header class="site-header">
  <div class="container header-inner">
    <a href="#top" class="brand">
      <span class="brand-mark">L</span>
      <span class="brand-name">Lumen Cycles<small>Copenhagen · est. 2019</small></span>
    </a>
    <button class="menu-toggle" aria-label="Menu" id="menuToggle"><span></span></button>
    <nav class="primary" id="primaryNav">
      <a href="#models">Models</a>
      <a href="#craft">Workshop</a>
      <a href="#process">How it works</a>
      <a href="#specs">Specs</a>
      <a href="#faq">FAQ</a>
      <a href="#contact" class="nav-cta">Configure yours</a>
    </nav>
  </div>
</header>

<main id="top">

<!-- HERO -->
<section class="hero">
  <div class="container hero-grid">
    <div>
      <div class="eyebrow reveal">Handbuilt in Vesterbro, Copenhagen</div>
      <h1 class="reveal">Cargo bikes built <em>around your life.</em></h1>
      <p class="hero-lead reveal">Custom long-john and long-tail cargo bikes, welded, painted and assembled in our workshop on Istedgade. Every frame is made to order, fitted to you, and delivered in 8–12 weeks. No shortcuts, no compromises — just a bike that will outlast the car it replaces.</p>
      <div class="hero-ctas reveal">
        <a href="#contact" class="btn btn-primary">Configure your bike →</a>
        <a href="#models" class="btn btn-ghost">See the models</a>
      </div>
      <div class="hero-meta reveal">
        <div><strong>From €3,690</strong><br>Complete, ready to ride</div>
        <div><strong>5-year</strong><br>Frame warranty</div>
        <div><strong>Free</strong><br>Delivery in Denmark</div>
      </div>
    </div>
    <div class="hero-art reveal">
      <div class="bike-card">
        <svg id="heroBike" class="bike-svg" viewBox="0 0 520 360" xmlns="http://www.w3.org/2000/svg" aria-label="Lumen cargo bike illustration">
          <!-- ground -->
          <line x1="20" y1="300" x2="500" y2="300" stroke="#ddd6ca" stroke-width="1"/>
          <!-- rear wheel -->
          <circle cx="395" cy="235" r="62" fill="none" stroke="#1c1a17" stroke-width="2"/>
          <circle cx="395" cy="235" r="8" fill="#1c1a17"/>
          <g stroke="#b8a892" stroke-width="1">
            <line x1="395" y1="173" x2="395" y2="297"/><line x1="333" y1="235" x2="457" y2="235"/>
            <line x1="351" y1="191" x2="439" y2="279"/><line x1="439" y1="191" x2="351" y2="279"/>
          </g>
          <!-- front wheel -->
          <circle cx="115" cy="255" r="46" fill="none" stroke="#1c1a17" stroke-width="2"/>
          <circle cx="115" cy="255" r="6" fill="#1c1a17"/>
          <g stroke="#b8a892" stroke-width="1">
            <line x1="115" y1="209" x2="115" y2="301"/><line x1="69" y1="255" x2="161" y2="255"/>
            <line x1="82" y1="222" x2="148" y2="288"/><line x1="148" y1="222" x2="82" y2="288"/>
          </g>
          <!-- cargo box -->
          <rect class="box" x="95" y="150" width="150" height="70" rx="8" fill="#1c1a17"/>
          <rect x="105" y="160" width="130" height="50" rx="4" fill="#f4f1ec" opacity=".18"/>
          <line x1="170" y1="160" x2="170" y2="210" stroke="#f4f1ec" stroke-width="1" opacity=".3"/>
          <!-- frame -->
          <g class="frame" fill="none" stroke="#1c1a17" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
            <path d="M115 255 L150 200 L230 205 L395 235"/>
            <path d="M230 205 L260 150 L330 130 L395 235"/>
            <path d="M330 130 L360 100"/>
            <path d="M260 150 L300 120"/>
          </g>
          <!-- handlebar -->
          <path d="M360 100 Q375 85 395 88" stroke="#1c1a17" stroke-width="3" fill="none" stroke-linecap="round"/>
          <circle cx="395" cy="88" r="4" fill="#1c1a17"/>
          <!-- seat -->
          <rect x="292" y="108" width="46" height="8" rx="4" fill="#1c1a17"/>
          <line x1="300" y1="116" x2="300" y2="150" stroke="#1c1a17" stroke-width="2"/>
          <!-- pedals -->
          <circle cx="285" cy="225" r="12" fill="none" stroke="#1c1a17" stroke-width="2"/>
          <line x1="273" y1="225" x2="297" y2="225" stroke="#1c1a17" stroke-width="2"/>
          <!-- chain -->
          <path d="M297 225 Q345 220 387 235" stroke="#b8a892" stroke-width="1.5" fill="none" stroke-dasharray="4 3"/>
          <!-- headlight -->
          <circle cx="108" cy="200" r="6" fill="#a86a2a"/>
        </svg>
        <div class="config-row">
          <div>
            <div class="swatch-label">Frame colour</div>
            <div class="config-swatches" id="swatches">
              <button class="swatch active" data-color="#1c1a17" style="background:#1c1a17" aria-label="Ink"></button>
              <button class="swatch" data-color="#5b6b5a" style="background:#5b6b5a" aria-label="Sage"></button>
              <button class="swatch" data-color="#a86a2a" style="background:#a86a2a" aria-label="Copper"></button>
              <button class="swatch" data-color="#2b4a6b" style="background:#2b4a6b" aria-label="Navy"></button>
              <button class="swatch" data-color="#8a3a3a" style="background:#8a3a3a" aria-label="Brick"></button>
            </div>
          </div>
          <div class="config-price">
            <small>From</small>
            €3,990
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- TRUST -->
<div class="trust">
  <div class="container trust-inner">
    <span class="trust-label">Trusted by riders &amp; featured in</span>
    <div class="trust-logos">
      <span>Monocle</span>
      <span>Copenhagenize</span>
      <span>BikeRadar</span>
      <span>The Local DK</span>
      <span>Eurobike Award 2023</span>
    </div>
  </div>
</div>

<!-- MODELS -->
<section id="models">
  <div class="container">
    <div class="section-head reveal">
      <div class="eyebrow">The range</div>
      <h2>Three frames. One workshop. Built for how you actually move.</h2>
      <p>Every Lumen starts from a proven geometry and is then tuned to your height, cargo and riding. Pick a starting point — we handle the rest.</p>
    </div>
    <div class="models-grid">
      <article class="model-card reveal">
        <div class="model-illustration">
          <svg viewBox="0 0 260 140" xmlns="http://www.w3.org/2000/svg">
            <line x1="10" y1="120" x2="250" y2="120" stroke="#ddd6ca" stroke-width="1"/>
            <circle cx="70" cy="95" r="26" fill="none" stroke="#1c1a17" stroke-width="2"/>
            <circle cx="70" cy="95" r="3" fill="#1c1a17"/>
            <circle cx="200" cy="95" r="30" fill="none" stroke="#1c1a17" stroke-width="2"/>
            <circle cx="200" cy="95" r="3" fill="#1c1a17"/>
            <rect x="55" y="55" width="60" height="30" rx="5" fill="#1c1a17"/>
            <path d="M70 95 L95 70 L150 72 L200 95" fill="none" stroke="#1c1a17" stroke-width="2.5" stroke-linecap="round"/>
            <path d="M150 72 L170 45 L200 95" fill="none" stroke="#1c1a17" stroke-width="2.5" stroke-linecap="round"/>
            <rect x="162" y="38" width="28" height="6" rx="3" fill="#1c1a17"/>
          </svg>
        </div>
        <h3 class="model-name">Lumen Compact</h3>
        <p class="model-tag">Short-tail cargo. City living, tight corners.</p>
        <ul class="model-specs">
          <li><span>Capacity</span><span>60 kg rear</span></li>
          <li><span>Weight</span><span>24 kg</span></li>
          <li><span>Motor</span><span>Shimano EP6</span></li>
          <li><span>Range</span><span>up to 90 km</span></li>
        </ul>
        <div class="model-price">€3,690 <small>from</small></div>
        <a href="#contact" class="model-cta">Configure Compact</a>
      </article>

      <article class="model-card featured reveal">
        <span class="model-badge">Most popular</span>
        <div class="model-illustration">
          <svg viewBox="0 0 260 140" xmlns="http://www.w3.org/2000/svg">
            <line x1="10" y1="120" x2="250" y2="120" stroke="rgba(244,241,236,.3)" stroke-width="1"/>
            <circle cx="60" cy="100" r="22" fill="none" stroke="#f4f1ec" stroke-width="2"/>
            <circle cx="60" cy="100" r="3" fill="#f4f1ec"/>
            <circle cx="210" cy="95" r="32" fill="none" stroke="#f4f1ec" stroke-width="2"/>
            <circle cx="210" cy="95" r="3" fill="#f4f1ec"/>
            <rect x="40" y="52" width="95" height="40" rx="6" fill="#a86a2a"/>
            <path d="M60 100 L85 72 L150 75 L210 95" fill="none" stroke="#f4f1ec" stroke-width="2.5" stroke-linecap="round"/>
            <path d="M150 75 L175 42 L210 95" fill="none" stroke="#f4f1ec" stroke-width="2.5" stroke-linecap="round"/>
            <rect x="168" y="34" width="30" height="6" rx="3" fill="#f4f1ec"/>
          </svg>
        </div>
        <h3 class="model-name">Lumen City</h3>
        <p class="model-tag">Long-john. The daily driver for families.</p>
        <ul class="model-specs">
          <li><span>Capacity</span><span>100 kg front box</span></li>
          <li><span>Weight</span><span>29 kg</span></li>
          <li><span>Motor</span><span>Bosch Cargo Line</span></li>
          <li><span>Range</span><span>up to 110 km</span></li>
        </ul>
        <div class="model-price">€3,990 <small>from</small></div>
        <a href="#contact" class="model-cta">Configure City</a>
      </article>

      <article class="model-card reveal">
        <div class="model-illustration">
          <svg viewBox="0 0 260 140" xmlns="http://www.w3.org/2000/svg">
            <line x1="10" y1="120" x2="250" y2="120" stroke="#ddd6ca" stroke-width="1"/>
            <circle cx="55" cy="98" r="20" fill="none" stroke="#1c1a17" stroke-width="2"/>
            <circle cx="55" cy="98" r="3" fill="#1c1a17"/>
            <circle cx="215" cy="95" r="32" fill="none" stroke="#1c1a17" stroke-width="2"/>
            <circle cx="215" cy="95" r="3" fill="#1c1a17"/>
            <rect x="38" y="48" width="105" height="44" rx="7" fill="#1c1a17"/>
            <rect x="46" y="56" width="89" height="28" rx="4" fill="#f4f1ec" opacity=".15"/>
            <path d="M55 98 L80 70 L150 72 L215 95" fill="none" stroke="#1c1a17" stroke-width="2.5" stroke-linecap="round"/>
            <path d="M150 72 L180 40 L215 95" fill="none" stroke="#1c1a17" stroke-width="2.5" stroke-linecap="round"/>
            <rect x="172" y="32" width="32" height="6" rx="3" fill="#1c1a17"/>
            <circle cx="100" cy="70" r="1.5" fill="#f4f1ec"/>
          </svg>
        </div>
        <h3 class="model-name">Lumen Family</h3>
        <p class="model-tag">Box cargo. Two kids, a dog, the weekly shop.</p>
        <ul class="model-specs">
          <li><span>Capacity</span><span>125 kg front box</span></li>
          <li><span>Weight</span><span>34 kg</span></li>
          <li><span>Motor</span><span>Bosch Cargo Line</span></li>
          <li><span>Range</span><span>up to 100 km</span></li>
        </ul>
        <div class="model-price">€4,490 <small>from</small></div>
        <a href="#contact" class="model-cta">Configure Family</a>
      </article>
    </div>
  </div>
</section>

<!-- WHY -->
<section class="features">
  <div class="container">
    <div class="section-head reveal">
      <div class="eyebrow">Why Lumen</div>
      <h2>Built the way bikes used to be built.</h2>
      <p>We are a workshop first and a brand second. Every decision is made in steel, by hand, by people who ride these bikes home at night.</p>
    </div>
    <div class="features-grid">
      <div class="feature reveal">
        <div class="feature-num">01</div>
        <h3>Reynolds steel, not aluminium</h3>
        <p>Steel absorbs road chatter, can be repaired anywhere in the world, and rides better the longer you own it. Our frames are fillet-brazed in-house from Reynolds 631 and 853 tubing.</p>
      </div>
      <div class="feature reveal">
        <div class="feature-num">02</div>
        <h3>Gates belt, not a chain</h3>
        <p>Clean, quiet, maintenance-free. The Carbon Drive belt lasts up to 30,000 km and never stains your trousers. Paired with Enviolo or Rohloff hub gears.</p>
      </div>
      <div class="feature reveal">
        <div class="feature-num">03</div>
        <h3>Bosch &amp; Shimano systems</h3>
        <p>We only fit drive systems with a European service network and a 10-year parts commitment. Your bike stays repairable long after we stop making it.</p>
      </div>
      <div class="feature reveal">
        <div class="feature-num">04</div>
        <h3>Painted in Copenhagen</h3>
        <p>Powder coat and wet paint applied by the same painter who has finished every Lumen since 2019. Custom colours welcome — send us a swatch.</p>
      </div>
      <div class="feature reveal">
        <div class="feature-num">05</div>
        <h3>Fitted to you</h3>
        <p>Before we weld, we sit down with you (in person or by video) to set reach, stack and cargo layout. The frame is then cut to your numbers.</p>
      </div>
      <div class="feature reveal">
        <div class="feature-num">06</div>
        <h3>Serviceable for decades</h3>
        <p>Standard bolts, standard bearings, standard spokes. No proprietary parts. Any competent bike shop can service a Lumen — including yours.</p>
      </div>
    </div>
  </div>
</section>

<!-- PROCESS -->
<section id="process">
  <div class="container">
    <div class="section-head reveal">
      <div class="eyebrow">How it works</div>
      <h2>From first sketch to your door in four steps.</h2>
      <p>Ordering a custom bike should feel like commissioning furniture, not buying a car. Here is the whole journey.</p>
    </div>
    <div class="process-grid">
      <div class="step reveal">
        <h3>Configure &amp; consult</h3>
        <p>Choose a model, colour and spec online, then book a 30-minute call with our builder. We refine geometry, cargo and accessories together.</p>
        <span class="step-time">Week 0 · Free</span>
      </div>
      <div class="step reveal">
        <h3>Deposit &amp; design lock</h3>
        <p>A 30% deposit confirms your slot. We send a final geometry drawing and parts list for approval before anything is cut.</p>
        <span class="step-time">Week 1</span>
      </div>
      <div class="step reveal">
        <h3>Build &amp; paint</h3>
        <p>Frame is cut, brazed, aligned and painted in our workshop. You receive weekly photos from the bench. Components are fitted and test-ridden.</p>
        <span class="step-time">Weeks 2–10</span>
      </div>
      <div class="step reveal">
        <h3>Delivery &amp; handover</h3>
        <p>We deliver fully assembled, fitted and ready to ride, anywhere in Denmark. A 90-minute handover covers controls, maintenance and care.</p>
        <span class="step-time">Weeks 10–12</span>
      </div>
    </div>
  </div>
</section>

<!-- CRAFT -->
<section class="craft" id="craft">
  <div class="container craft-grid">
    <div>
      <div class="section-head reveal">
        <div class="eyebrow" style="color:rgba(244,241,236,.6)">The workshop</div>
        <h2>Six people. One street. Bikes we are proud to sign.</h2>
      </div>
      <p class="reveal">Lumen started in 2019 in a 40-square-metre basement on Istedgade. We are now six people — three builders, a painter, a mechanic and a designer — in a proper workshop two doors down. We build roughly 180 bikes a year and have never once wished we built more.</p>
      <ul class="craft-list reveal">
        <li>
          <svg width="26" height="26" viewBox="0 0 26 26" fill="none"><circle cx="13" cy="13" r="12" stroke="rgba(244,241,236,.4)" stroke-width="1"/><path d="M8 13 L11.5 16.5 L18 10" stroke="#a86a2a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
          <div><strong>Frames welded in-house</strong><span>Every joint is fillet-brazed by hand. No imported frames, no rebadged catalogue bikes.</span></div>
        </li>
        <li>
          <svg width="26" height="26" viewBox="0 0 26 26" fill="none"><circle cx="13" cy="13" r="12" stroke="rgba(244,241,236,.4)" stroke-width="1"/><path d="M8 13 L11.5 16.5 L18 10" stroke="#a86a2a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
          <div><strong>Weekly build photos</strong><span>You see your frame being made. If something looks wrong, we fix it before paint.</span></div>
        </li>
        <li>
          <svg width="26" height="26" viewBox="0 0 26 26" fill="none"><circle cx="13" cy="13" r="12" stroke="rgba(244,241,236,.4)" stroke-width="1"/><path d="M8 13 L11.5 16.5 L18 10" stroke="#a86a2a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
          <div><strong>5-year frame warranty</strong><span>Plus 2 years on components and lifetime crash replacement at cost.</span></div>
        </li>
        <li>
          <svg width="26" height="26" viewBox="0 0 26 26" fill="none"><circle cx="13" cy="13" r="12" stroke="rgba(244,241,236,.4)" stroke-width="1"/><path d="M8 13 L11.5 16.5 L18 10" stroke="#a86a2a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
          <div><strong>Open workshop visits</strong><span>Come see us build. Saturdays 10–14, no appointment needed.</span></div>
        </li>
      </ul>
    </div>
    <div class="craft-visual reveal">
      <svg viewBox="0 0 400 500" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
        <defs>
          <linearGradient id="g1" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0" stop-color="#2a2722"/>
            <stop offset="1" stop-color="#141210"/>
          </linearGradient>
        </defs>
        <rect width="400" height="500" fill="url(#g1)"/>
        <!-- workshop wall lines -->
        <g stroke="rgba(244,241,236,.06)" stroke-width="1">
          <line x1="0" y1="100" x2="400" y2="100"/><line x1="0" y1="200" x2="400" y2="200"/>
          <line x1="0" y1="300" x2="400" y2="300"/><line x1="0" y1="400" x2="400" y2="400"/>
          <line x1="100" y1="0" x2="100" y2="500"/><line x1="200" y1="0" x2="200" y2="500"/>
          <line x1="300" y1="0" x2="300" y2="500"/>
        </g>
        <!-- hanging tools -->
        <g stroke="rgba(244,241,236,.35)" stroke-width="1.5" fill="none">
          <path d="M60 60 L60 110 M55 110 L65 110"/>
          <path d="M90 60 L90 100 Q90 115 105 115"/>
          <path d="M120 60 L120 95 L135 95 L135 110"/>
          <path d="M300 60 L300 120 M295 120 L305 120"/>
        </g>
        <!-- bike on stand -->
        <g transform="translate(40,260)">
          <line x1="0" y1="200" x2="320" y2="200" stroke="rgba(244,241,236,.2)" stroke-width="1"/>
          <!-- stand -->
          <rect x="150" y="60" width="8" height="140" fill="rgba(244,241,236,.15)"/>
          <rect x="130" y="195" width="48" height="6" fill="rgba(244,241,236,.25)"/>
          <!-- bike -->
          <circle cx="80" cy="160" r="38" fill="none" stroke="#f4f1ec" stroke-width="2"/>
          <circle cx="80" cy="160" r="4" fill="#f4f1ec"/>
          <circle cx="230" cy="160" r="42" fill="none" stroke="#f4f1ec" stroke-width="2"/>
          <circle cx="230" cy="160" r="4" fill="#f4f1ec"/>
          <path d="M80 160 L110 110 L170 115 L230 160" fill="none" stroke="#a86a2a" stroke-width="3" stroke-linecap="round"/>
          <path d="M170 115 L195 80 L230 160" fill="none" stroke="#a86a2a" stroke-width="3" stroke-linecap="round"/>
          <rect x="188" y="72" width="32" height="6" rx="3" fill="#f4f1ec"/>
          <rect x="95" y="95" width="60" height="26" rx="5" fill="rgba(244,241,236,.12)" stroke="#a86a2a" stroke-width="1.5"/>
        </g>
        <!-- sparks -->
        <g fill="#a86a2a">
          <circle cx="195" cy="230" r="1.5" opacity=".9"/>
          <circle cx="210" cy="220" r="1" opacity=".6"/>
          <circle cx="185" cy="245" r="1.2" opacity=".7"/>
          <circle cx="225" cy="235" r="0.8" opacity=".5"/>
        </g>
      </svg>
      <div class="craft-stat">
        <strong>180</strong>
        <span>Bikes built per year</span>
      </div>
    </div>
  </div>
</section>

<!-- SPECS -->
<section id="specs">
  <div class="container">
    <div class="section-head reveal">
      <div class="eyebrow">Specifications</div>
      <h2>What every Lumen ships with.</h2>
      <p>Standard spec on the City model. Compact and Family variants adjust wheel size and cargo hardware; all other components are shared.</p>
    </div>
    <div class="specs-wrap reveal">
      <table class="specs-table">
        <thead>
          <tr><th>Component</th><th>Standard</th><th>Upgrade options</th></tr>
        </thead>
        <tbody>
          <tr><td>Frame</td><td>Reynolds 631 steel, fillet-brazed</td><td>Reynolds 853 (+€400)</td></tr>
          <tr><td>Fork</td><td>Steel, unicrown, 12 mm thru-axle</td><td>Suspension fork (+€350)</td></tr>
          <tr><td>Drive</td><td>Bosch Cargo Line, 75 Nm</td><td>Bosch Performance CX (+€200)</td></tr>
          <tr><td>Battery</td><td>500 Wh PowerPack</td><td>750 Wh (+€300)</td></tr>
          <tr><td>Gears</td><td>Enviolo Heavy Duty, stepless</td><td>Rohloff Speedhub 14 (+€900)</td></tr>
          <tr><td>Belt</td><td>Gates Carbon Drive CDX</td><td>—</td></tr>
          <tr><td>Brakes</td><td>Magura MT5e hydraulic disc</td><td>Magura MT7 (+€120)</td></tr>
          <tr><td>Wheels</td><td>26" rear / 20" front, double wall</td><td>—</td></tr>
          <tr><td>Tyres</td><td>Schwalbe Pick-Up, puncture protected</td><td>—</td></tr>
          <tr><td>Lights</td><td>Supernova M99, dynamo powered</td><td>—</td></tr>
          <tr><td>Cargo box</td><td>Birch plywood, marine varnish</td><td>Aluminium box (+€250)</td></tr>
          <tr><td>Weight</td><td>29 kg (City, with battery)</td><td>—</td></tr>
        </tbody>
      </table>
    </div>
  </div>
</section>

<!-- TESTIMONIALS -->
<section>
  <div class="container">
    <div class="section-head reveal">
      <div class="eyebrow">Riders</div>
      <h2>What owners say after a year.</h2>
      <p>We ask every customer to write back after 12 months. These are unedited.</p>
    </div>
    <div class="testimonials-grid">
      <figure class="quote reveal">
        <div class="quote-mark">"</div>
        <p>We sold our second car in March. The Lumen does school run, weekly shop and the 14 km commute to Østerbro. Our daughter calls it the spaceship.</p>
        <figcaption class="quote-author">
          <div class="avatar">MK</div>
          <div><strong>Mette K.</strong><span>Copenhagen N · Lumen Family</span></div>
        </figcaption>
      </figure>
      <figure class="quote reveal">
        <div class="quote-mark">"</div>
        <p>I have owned three cargo bikes. This is the first that does not feel like pushing a wardrobe. The steering is light even fully loaded.</p>
        <figcaption class="quote-author">
          <div class="avatar">JH</div>
          <div><strong>Jonas H.</strong><span>Aarhus · Lumen City</span></div>
        </figcaption>
      </figure>
      <figure class="quote reveal">
        <div class="quote-mark">"</div>
        <p>The build photos were the best part. Watching my frame being brazed made the 11-week wait feel like part of the product, not a delay.</p>
        <figcaption class="quote-author">
          <div class="avatar">SR</div>
          <div><strong>Sara R.</strong><span>Odense · Lumen Compact</span></div>
        </figcaption>
      </figure>
    </div>
  </div>
</section>

<!-- FAQ -->
<section class="faq" id="faq">
  <div class="container">
    <div class="section-head reveal" style="text-align:center;margin-inline:auto;">
      <div class="eyebrow" style="justify-content:center;">Questions</div>
      <h2>Things people ask before ordering.</h2>
    </div>
    <div class="faq-list">
      <details class="faq-item reveal">
        <summary>How long is the wait, really?</summary>
        <p>8–12 weeks from deposit to delivery, depending on the season. Spring orders (March–May) run longest. We confirm your slot in writing before taking a deposit, so you know exactly when your bike ships.</p>
      </details>
      <details class="faq-item reveal">
        <summary>Can I try one before I order?</summary>
        <p>Yes. We keep demo bikes in all three models at the workshop. Book a 45-minute test ride online or just walk in on a Saturday. Bring your kids and your usual cargo.</p>
      </details>
      <details class="faq-item reveal">
        <summary>Do you ship outside Denmark?</summary>
        <p>We deliver fully assembled across Denmark, southern Sweden and northern Germany. Further afield we ship partially assembled in a crate with a local partner handling final setup. Ask us for a quote.</p>
      </details>
      <details class="faq-item reveal">
        <summary>What if the bike does not fit me?</summary>
        <p>The geometry consultation exists to prevent this. If, after handover, something is off, we adjust stem, bars and saddle at no cost within the first 60 days. Frame geometry changes after brazing are not possible, which is why we take the consultation seriously.</p>
      </details>
      <details class="faq-item reveal">
        <summary>Is it safe to carry children?</summary>
        <p>Yes. The Family and City boxes are tested to EN 17860 and include 5-point harnesses, roll bars and footrests. We recommend helmets for all passengers and offer fitted child seats from €180.</p>
      </details>
      <details class="faq-item reveal">
        <summary>How do I service it?</summary>
        <p>Annual service at our workshop is €120 and takes a day. Any competent bike shop can also service a Lumen — we publish a full service manual and ship parts worldwide within 48 hours.</p>
      </details>
      <details class="faq-item reveal">
        <summary>Can I pay in instalments?</summary>
        <p>Yes. 30% deposit, 40% at frame completion, 30% on delivery. We also partner with two Danish financing providers for 12- and 24-month plans. Ask during your consultation.</p>
      </details>
    </div>
  </div>
</section>

<!-- CONTACT -->
<section id="contact">
  <div class="container contact-grid">
    <div class="contact-info reveal">
      <div class="eyebrow">Start your build</div>
      <h2>Tell us how you move. We will design the bike around it.</h2>
      <p>Send a few details and we will reply within one working day with available slots, a first price estimate and an invitation to a consultation call.</p>
      <div class="contact-block">
        <strong>Workshop</strong>
        <span>Istedgade 117, 1650 Copenhagen V, Denmark</span>
      </div>
      <div class="contact-block">
        <strong>Hours</strong>
        <span>Mon–Fri 9:00–17:30 · Sat 10:00–14:00</span>
      </div>
      <div class="contact-block">
        <strong>Phone</strong>
        <a href="tel:+4533123456">+45 33 12 34 56</a>
      </div>
      <div class="contact-block">
        <strong>Email</strong>
        <a href="mailto:hello@lumencycles.dk">hello@lumencycles.dk</a>
      </div>
    </div>
    <form class="form reveal" id="contactForm" onsubmit="handleSubmit(event)">
      <div class="form-row">
        <div class="field">
          <label for="name">Name</label>
          <input id="name" name="name" type="text" required placeholder="Your name">
        </div>
        <div class="field">
          <label for="email">Email</label>
          <input id="email" name="email" type="email" required placeholder="you@example.com">
        </div>
      </div>
      <div class="form-row">
        <div class="field">
          <label for="model">Model</label>
          <select id="model" name="model">
            <option>Lumen Compact</option>
            <option selected>Lumen City</option>
            <option>Lumen Family</option>
            <option>Not sure yet</option>
          </select>
        </div>
        <div class="field">
          <label for="height">Your height (cm)</label>
          <input id="height" name="height" type="number" placeholder="175">
        </div>
      </div>
      <div class="field">
        <label for="use">What will you carry?</label>
        <textarea id="use" name="use" placeholder="e.g. two children (4 and 7), weekly groceries, 12 km commute..."></textarea>
      </div>
      <button type="submit" class="btn btn-primary">Send enquiry</button>
      <p class="form-note">We reply within one working day. No spam, ever.</p>
    </form>
  </div>
</section>

</main>

<footer>
  <div class="container">
    <div class="footer-grid">
      <div class="footer-brand">
        <a href="#top" class="brand" style="color:var(--bg);margin-bottom:1rem;">
          <span class="brand-mark" style="background:var(--bg);color:var(--ink);">L</span>
          <span class="brand-name">Lumen Cycles<small style="color:rgba(244,241,236,.5)">Copenhagen · est. 2019</small></span>
        </a>
        <p>Custom cargo bikes, handbuilt to order in our Vesterbro workshop. Steel frames, belt drives, Bosch power. Built to replace your car and outlast it.</p>
      </div>
      <div>
        <h4>Bikes</h4>
        <ul>
          <li><a href="#models">Lumen Compact</a></li>
          <li><a href="#models">Lumen City</a></li>
          <li><a href="#models">Lumen Family</a></li>
          <li><a href="#specs">Specifications</a></li>
          <li><a href="#process">How it works</a></li>
        </ul>
      </div>
      <div>
        <h4>Workshop</h4>
        <ul>
          <li><a href="#craft">About us</a></li>
          <li><a href="#faq">FAQ</a></li>
          <li><a href="#">Service manual</a></li>
          <li><a href="#">Spare parts</a></li>
          <li><a href="#">Visit us</a></li>
        </ul>
      </div>
      <div>
        <h4>Follow</h4>
        <ul>
          <li><a href="#">Instagram</a></li>
          <li><a href="#">Strava club</a></li>
          <li><a href="#">Newsletter</a></li>
          <li><a href="#">Press kit</a></li>
        </ul>
      </div>
    </div>
    <div class="footer-bottom">
      <span>© 2025 Lumen Cycles ApS · CVR 41234567 · Istedgade 117, 1650 Copenhagen V</span>
      <span>Terms · Privacy · Cookies</span>
    </div>
  </div>
</footer>

<script>
// Mobile menu
const toggle = document.getElementById('menuToggle');
const nav = document.getElementById('primaryNav');
toggle.addEventListener('click', () => {
  nav.classList.toggle('open');
  toggle.classList.toggle('open');
});
nav.querySelectorAll('a').forEach(a => a.addEventListener('click', () => {
  nav.classList.remove('open');
  toggle.classList.remove('open');
}));

// Color swatches -> repaint hero bike
const heroBike = document.getElementById('heroBike');
document.querySelectorAll('#swatches .swatch').forEach(s => {
  s.addEventListener('click', () => {
    document.querySelectorAll('#swatches .swatch').forEach(x => x.classList.remove('active'));
    s.classList.add('active');
    const c = s.dataset.color;
    heroBike.style.setProperty('--bike', c);
    heroBike.querySelectorAll('.frame').forEach(e => e.setAttribute('stroke', c));
    heroBike.querySelectorAll('.box').forEach(e => e.setAttribute('fill', c));
  });
});

// Reveal on scroll
const io = new IntersectionObserver((entries) => {
  entries.forEach(e => {
    if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); }
  });
}, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });
document.querySelectorAll('.reveal').forEach(el => io.observe(el));

// Form submit (demo)
function handleSubmit(e) {
  e.preventDefault();
  const btn = e.target.querySelector('button[type="submit"]');
  const original = btn.textContent;
  btn.textContent = 'Sending…';
  btn.disabled = true;
  setTimeout(() => {
    btn.textContent = 'Enquiry sent ✓';
    btn.style.background = '#5b6b5a';
    e.target.reset();
    setTimeout(() => {
      btn.textContent = original;
      btn.style.background = '';
      btn.disabled = false;
    }, 3000);
  }, 900);
}

// Smooth anchor offset for sticky header
document.querySelectorAll('a[href^="#"]').forEach(a => {
  a.addEventListener('click', (e) => {
    const id = a.getAttribute('href');
    if (id === '#' || id === '#top') return;
    const el = document.querySelector(id);
    if (!el) return;
    e.preventDefault();
    const y = el.getBoundingClientRect().top + window.scrollY - 72;
    window.scrollTo({ top: y, behavior: 'smooth' });
  });
});
</script>
</body>
</html>

Compare with

Beam 1.0: other attempts