• Updated 11 Nov, 12:43 UTC
  • Next run 12 Nov, 05:17 UTCNext 12 Nov 05:17
  • Last 7 days: 10 new models · 61 runs7 d: 10 models · 61 runs
Landing page for a cargo bike workshop

Muse EmberMeta

Network offOpen alone (new tab)

Run details

Model
meta/muse-ember
Route
OpenRouter API, one user message
Served by
Meta
Effort
max, OpenRouter's default for this model
Limits
60 min · 943,718 output tokens (the model's limit)
Date
9 Nov 2026
Time
41 s
Size
68 kB
Tokens
94 in, 26,180 out (5,570 of them thinking)
List price
$0.013 at today's price ($0.10 in / $0.50 out per M)
Paid
$0.013

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

68 kB 1,053 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 by Hand in Copenhagen</title>
<meta name="description" content="Custom cargo bikes built to order in Copenhagen. 10-year frame warranty, test rides, transparent pricing. From 29,900 kr.">
<style>
:root{
  --ink:#18201C; --muted:#687066; --paper:#F8F4EC; --white:#FFFCF6;
  --line:#E1D8C4; --line2:#D5CBB5; --accent:#C56A1D; --accent2:#E8A83E;
  --dark:#131915; --sage:#3E5648; --radius:18px;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.6;-webkit-font-smoothing:antialiased}
::selection{background:var(--accent2);color:var(--ink)}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer}
.container{width:min(1180px,92vw);margin:0 auto}
.eyebrow{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);font-weight:700;display:flex;align-items:center;gap:12px;margin-bottom:18px}
.eyebrow::before{content:"";width:32px;height:1px;background:var(--accent)}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.02;letter-spacing:-.02em;margin:0}
h2{font-size:clamp(34px,4.5vw,52px)}
h3{font-size:24px}
.lead{font-size:19px;line-height:1.65;color:#3E463F}
.muted{color:var(--muted)}
.small{font-size:13px;line-height:1.6}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 26px;border-radius:999px;font-weight:700;font-size:15px;border:1px solid var(--ink);transition:.25s;white-space:nowrap}
.btn-dark{background:var(--ink);color:#FFF8EB}
.btn-dark:hover{background:var(--accent);border-color:var(--accent);transform:translateY(-1px)}
.btn-accent{background:var(--accent);color:#FFF8EB;border-color:var(--accent)}
.btn-accent:hover{background:var(--ink);border-color:var(--ink)}
.btn-outline{background:transparent;color:var(--ink)}
.btn-outline:hover{background:var(--ink);color:#FFF8EB}
.btn-light{background:#FFF8EB;color:var(--ink);border-color:#FFF8EB}
.btn-light:hover{background:var(--accent2)}
/* HEADER */
.topbar{background:var(--dark);color:#EDE3CE;font-size:12.5px;letter-spacing:.04em}
.topbar .container{display:flex;justify-content:space-between;gap:20px;padding:9px 0;flex-wrap:wrap}
.topbar b{color:var(--accent2);font-weight:700}
header{position:sticky;top:0;z-index:50;background:rgba(248,244,236,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);transition:.3s}
header.scrolled{box-shadow:0 10px 30px rgba(24,32,28,.08)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:18px 0;gap:24px}
.logo{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.14em;font-size:18px}
.logo-mark{width:32px;height:32px;border-radius:50%;background:var(--accent2);display:grid;place-items:center;position:relative;flex:0 0 auto}
.logo-mark::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--ink)}
.logo span small{display:block;font-size:9px;letter-spacing:.32em;color:var(--muted);font-weight:700;margin-top:1px}
.nav-links{display:flex;gap:30px;align-items:center;font-size:14.5px;font-weight:600}
.nav-links a{color:#3B443D;padding:6px 0;border-bottom:2px solid transparent}
.nav-links a:hover{border-color:var(--accent);color:var(--ink)}
.nav-cta{display:flex;gap:10px;align-items:center}
.nav-cta .btn{padding:11px 20px;font-size:13.5px}
.menu-btn{display:none;background:none;border:1px solid var(--line2);width:44px;height:44px;border-radius:50%;font-size:18px}
/* HERO */
.hero{padding:64px 0 78px;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;right:-180px;top:-120px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(232,168,62,.22),transparent 65%)}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:62px;align-items:center;position:relative}
.hero h1{font-size:clamp(46px,6.4vw,78px);margin-bottom:24px}
.hero h1 em{font-style:italic;color:var(--accent)}
.hero-badge{display:inline-flex;gap:8px;align-items:center;background:var(--white);border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-size:12.5px;font-weight:700;letter-spacing:.06em;margin-bottom:26px}
.hero-badge i{width:8px;height:8px;border-radius:50%;background:#4A8A4A;display:block}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin:32px 0 22px}
.hero-trust{display:flex;flex-wrap:wrap;gap:18px;font-size:13.5px;color:#3B443D;font-weight:600}
.hero-trust span{display:flex;gap:7px;align-items:center}
.check{color:var(--accent);font-weight:900}
.hero-stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line2);margin-top:44px;padding-top:28px;gap:16px}
.hero-stats b{font-family:var(--serif);font-size:34px;font-weight:500;display:block;line-height:1}
.hero-stats span{font-size:12.5px;color:var(--muted);line-height:1.4;display:block;margin-top:6px}
.hero-art{background:var(--white);border:1px solid var(--line);border-radius:28px;padding:22px 22px 14px;box-shadow:0 24px 60px rgba(24,32,28,.10)}
.hero-art svg{width:100%;height:auto}
.hero-caption{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--line);padding-top:14px;margin-top:12px;font-size:12.5px;color:var(--muted)}
.hero-caption b{color:var(--ink)}
/* STRIP */
.strip{background:var(--dark);color:#EDE3CE}
.strip .container{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.strip div{padding:22px 22px 22px 0;border-right:1px solid rgba(255,255,255,.12)}
.strip div:last-child{border:0;padding-left:22px}
.strip div:nth-child(2),.strip div:nth-child(3){padding-left:22px}
.strip b{display:block;font-family:var(--serif);font-size:18px;color:#FFF8EB;font-weight:500}
.strip span{font-size:13px;color:#B8B2A2}
/* SECTIONS */
section{padding:96px 0}
.section-head{max-width:760px;margin-bottom:52px}
.section-head h2{margin-bottom:16px}
.alt{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.dark-sec{background:var(--dark);color:#EDE3CE}
.dark-sec .muted{color:#B8B2A2}
.dark-sec .eyebrow{color:var(--accent2)}
.dark-sec .eyebrow::before{background:var(--accent2)}
/* WHY PRICE */
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.price-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:30px}
.price-card h3{margin-bottom:8px}
.bar-row{margin:20px 0}
.bar-row label{display:flex;justify-content:space-between;font-size:14px;font-weight:700;margin-bottom:8px}
.bar-row label span{color:var(--muted);font-weight:600}
.bar{height:10px;background:#ECE3D0;border-radius:999px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent);border-radius:999px}
.bar-row:nth-child(3) .bar i{background:var(--ink)}
.bar-row:nth-child(4) .bar i{background:var(--accent2)}
.bar-row:nth-child(5) .bar i{background:var(--sage)}
.included{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:26px}
.included div{background:var(--white);border:1px solid var(--line);padding:14px 15px;border-radius:12px;font-size:13.5px;font-weight:600;display:flex;gap:9px}
.why-points{display:grid;gap:22px}
.why-point{display:grid;grid-template-columns:46px 1fr;gap:18px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.why-point:last-child{border:0}
.num{width:46px;height:46px;border-radius:50%;border:1px solid var(--accent);color:var(--accent);display:grid;place-items:center;font-family:var(--serif);font-size:18px}
.why-point h3{font-size:20px;margin-bottom:6px}
/* MODELS */
.models{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.model{background:var(--white);border:1px solid var(--line);border-radius:22px;overflow:hidden;transition:.3s;display:flex;flex-direction:column}
.model:hover{transform:translateY(-5px);box-shadow:0 22px 44px rgba(24,32,28,.10);border-color:var(--line2)}
.model-top{padding:24px 24px 8px}
.model-art{background:#F3EDDD;margin:18px 18px 0;border-radius:14px;padding:18px}
.model-body{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1}
.model h3{font-size:28px}
.model .tag{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:800}
.model-price{font-family:var(--serif);font-size:24px;margin:12px 0 4px}
.model-price small{font-family:var(--sans);font-size:12px;color:var(--muted)}
.spec-list{list-style:none;padding:0;margin:16px 0 22px;border-top:1px solid var(--line)}
.spec-list li{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.spec-list li span{color:var(--muted)}
.spec-list li b{font-weight:700}
.model .btn{margin-top:auto;width:100%}
/* CONFIGURATOR */
.config-grid{display:grid;grid-template-columns:1.55fr .85fr;gap:28px;align-items:start}
.config-panel{background:var(--white);border:1px solid var(--line);border-radius:22px;padding:28px}
.config-step{padding:24px 0;border-bottom:1px solid var(--line)}
.config-step:first-of-type{padding-top:6px}
.config-step:last-child{border:0}
.config-step h3{font-size:18px;font-family:var(--sans);font-weight:800;letter-spacing:.01em;margin-bottom:6px}
.config-step p{margin:0 0 16px;font-size:13.5px;color:var(--muted)}
.options{display:grid;gap:10px}
.options.cols3{grid-template-columns:repeat(3,1fr)}
.options.cols2{grid-template-columns:repeat(2,1fr)}
.option{display:block;border:1.5px solid var(--line);border-radius:14px;padding:15px;cursor:pointer;transition:.2s;background:#FFFEF9}
.option:hover{border-color:var(--line2)}
.option input{position:absolute;opacity:0;pointer-events:none}
.option:has(input:checked){border-color:var(--accent);background:#FFF6E8;box-shadow:0 0 0 1px var(--accent) inset}
.option b{display:block;font-size:14.5px;line-height:1.3}
.option span{display:block;font-size:12.5px;color:var(--muted);margin-top:4px;line-height:1.4}
.option .price{color:var(--accent);font-weight:800;font-size:13px;margin-top:9px;display:block}
.option.check{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.option.check .price{margin:0;white-space:nowrap}
.summary{position:sticky;top:96px;background:var(--dark);color:#EDE3CE;border-radius:22px;padding:28px}
.summary h3{color:#FFF8EB;font-size:26px;margin-bottom:6px}
.summary .muted{color:#B8B2A2}
.summary-list{margin:22px 0;border-top:1px solid rgba(255,255,255,.14)}
.summary-list div{display:flex;justify-content:space-between;gap:18px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.14);font-size:13.5px}
.summary-list span{color:#B8B2A2}
.summary-list b{text-align:right;color:#FFF8EB}
.total-row{display:flex;justify-content:space-between;align-items:end;margin:20px 0 8px}
.total-row span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#B8B2A2}
.total-row b{font-family:var(--serif);font-size:36px;color:#FFF8EB;font-weight:500;line-height:1}
.eur{font-size:13px;color:var(--accent2);text-align:right;display:block}
.deposit-box{background:rgba(232,168,62,.14);border:1px solid rgba(232,168,62,.35);border-radius:14px;padding:16px;margin:18px 0}
.deposit-box b{color:#FFF8EB}
.summary .btn{width:100%}
.summary-note{font-size:12px;color:#B8B2A2;text-align:center;margin-top:12px;line-height:1.5}
/* PROCESS */
.process{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:step}
.step{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:26px}
.step-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.step-no{font-family:var(--serif);font-size:38px;color:var(--accent);line-height:1}
.step-time{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--muted);border:1px solid var(--line);padding:6px 9px;border-radius:999px}
.step h3{font-size:21px;margin-bottom:8px}
.step p{color:var(--muted);font-size:14.5px;margin:0}
/* MATERIALS */
.mat-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:start}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.tab-btn{padding:11px 18px;border-radius:999px;border:1.5px solid var(--line2);background:transparent;font-weight:700;font-size:13.5px}
.tab-btn.active{background:var(--ink);color:#FFF8EB;border-color:var(--ink)}
.tab-panel{display:none;background:var(--white);border:1px solid var(--line);border-radius:18px;padding:28px}
.tab-panel.active{display:block}
.tab-panel h3{margin-bottom:10px}
.spec-table{width:100%;border-collapse:collapse;margin-top:16px;font-size:14px}
.spec-table td{padding:11px 0;border-bottom:1px solid var(--line);vertical-align:top}
.spec-table td:first-child{color:var(--muted);width:38%}
.spec-table td:last-child{font-weight:700}
.diagram{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:24px}
.diagram h3{font-size:19px;font-family:var(--sans);font-weight:800;margin-bottom:6px}
/* OWNERSHIP */
.own-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:44px}
.own-card{background:#1E2621;border:1px solid rgba(255,255,255,.10);border-radius:16px;padding:22px}
.own-card b{font-family:var(--serif);font-size:20px;color:#FFF8EB;font-weight:500;display:block;margin-bottom:8px}
.own-card p{color:#B8B2A2;font-size:13.5px;margin:0}
.compare{width:100%;border-collapse:collapse;background:#1E2621;border:1px solid rgba(255,255,255,.12);border-radius:16px;overflow:hidden;font-size:14px}
.compare th,.compare td{padding:15px 18px;text-align:left;border-bottom:1px solid rgba(255,255,255,.10)}
.compare th{background:rgba(232,168,62,.14);color:#FFF8EB;font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.compare td:first-child{color:#B8B2A2}
.compare td{color:#EDE3CE}
.compare tr:last-child td{border-bottom:0;font-weight:800;color:var(--accent2)}
/* STORIES */
.stories{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.story{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:28px;display:flex;flex-direction:column}
.quote-mark{font-family:var(--serif);font-size:52px;color:var(--accent2);line-height:.5;margin-bottom:18px}
.story p{font-family:var(--serif);font-size:19px;line-height:1.45;margin:0 0 24px}
.story-meta{display:flex;gap:12px;align-items:center;margin-top:auto;border-top:1px solid var(--line);padding-top:18px}
.avatar{width:44px;height:44px;border-radius:50%;background:var(--accent2);display:grid;place-items:center;font-weight:800;font-size:14px;flex:0 0 auto}
.story-meta b{display:block;font-size:14px}
.story-meta span{font-size:12.5px;color:var(--muted)}
/* FAQ */
.faq-wrap{max-width:840px;margin:0 auto}
.faq{border-bottom:1px solid var(--line2)}
.faq button{width:100%;background:none;border:0;text-align:left;padding:24px 0;display:flex;justify-content:space-between;gap:20px;align-items:center;font-family:var(--serif);font-size:21px;color:var(--ink)}
.faq button span{width:36px;height:36px;border:1px solid var(--line2);border-radius:50%;display:grid;place-items:center;font-family:var(--sans);font-size:20px;flex:0 0 auto;transition:.3s}
.faq.open button span{transform:rotate(45deg);background:var(--ink);color:#FFF8EB}
.faq-panel{max-height:0;overflow:hidden;transition:max-height .35s ease}
.faq-panel p{color:var(--muted);padding:0 0 24px;margin:0;max-width:700px}
/* VISIT / FORM */
.visit-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:start}
.visit-card{background:var(--dark);color:#EDE3CE;border-radius:20px;padding:32px}
.visit-card h3{color:#FFF8EB;margin-bottom:14px}
.visit-card p,.visit-card li{color:#CFC8B6}
.info-row{display:flex;justify-content:space-between;gap:18px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.12);font-size:14px}
.info-row span{color:#B8B2A2}
.info-row b{color:#FFF8EB;text-align:right}
.form-card{background:var(--white);border:1px solid var(--line);border-radius:20px;padding:32px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1/-1}
label{font-size:13px;font-weight:800;letter-spacing:.02em}
input,select,textarea{width:100%;padding:14px 15px;border:1.5px solid var(--line2);border-radius:12px;background:#FFFEF9;font-family:inherit;font-size:15px;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(197,106,29,.15)}
textarea{min-height:110px;resize:vertical}
.form-note{font-size:12.5px;color:var(--muted);margin-top:14px}
.form-success{display:none;background:#EDF3E8;border:1px solid #B9CBA9;border-radius:14px;padding:20px;margin-top:18px}
.form-success.show{display:block}
.form-success b{font-family:var(--serif);font-size:20px;display:block;margin-bottom:6px}
/* FOOTER */
footer{background:var(--dark);color:#B8B2A2;padding:72px 0 34px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.12)}
footer h4{color:#FFF8EB;font-size:13px;letter-spacing:.16em;text-transform:uppercase;margin:0 0 16px}
footer a{display:block;padding:5px 0;font-size:14.5px}
footer a:hover{color:var(--accent2)}
.footer-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:24px;font-size:12.5px}
/* REVEAL */
.reveal{opacity:0;transform:translateY(18px);transition:.7s ease}
.reveal.visible{opacity:1;transform:none}
/* RESPONSIVE */
@media(max-width:1000px){
  .hero-grid,.why-grid,.mat-grid,.visit-grid{grid-template-columns:1fr}
  .config-grid{grid-template-columns:1fr}
  .summary{position:static}
  .models,.process,.stories{grid-template-columns:1fr 1fr}
  .own-grid{grid-template-columns:1fr 1fr}
  .strip .container{grid-template-columns:1fr 1fr}
  .strip div{border-bottom:1px solid rgba(255,255,255,.12);padding:18px 0}
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;background:var(--paper);flex-direction:column;align-items:flex-start;padding:22px 4vw;border-bottom:1px solid var(--line);gap:14px}
  .nav-links.open{display:flex}
  .menu-btn{display:grid;place-items:center}
  .nav-cta .btn-outline{display:none}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  section{padding:64px 0}
  .hero{padding:42px 0 56px}
  .hero-stats{grid-template-columns:1fr 1fr}
  .models,.process,.stories,.own-grid{grid-template-columns:1fr}
  .options.cols3,.options.cols2{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .included{grid-template-columns:1fr}
  .topbar .container{justify-content:center;text-align:center}
  .logo{font-size:16px}
  .compare th,.compare td{padding:11px 12px;font-size:13px}
  .total-row b{font-size:30px}
  .footer-grid{grid-template-columns:1fr}
}
</style>
</head>
<body>

<div class="topbar">
  <div class="container">
    <div>Refshaleøen, Copenhagen — Workshop visits Tue–Sat</div>
    <div><b>Next build slot in ~7 weeks</b> &nbsp;·&nbsp; 3 places left for Autumn 2026</div>
  </div>
</div>

<header id="header">
  <div class="container nav">
    <a class="logo" href="#top" aria-label="Lumen Cycles home"><span class="logo-mark" aria-hidden="true"></span><span>LUMEN<br>CYCLES<small>COPENHAGEN · EST. 2016</small></span></a>
    <nav class="nav-links" id="navLinks" aria-label="Main navigation">
      <a href="#models">Models</a>
      <a href="#configure">Configure</a>
      <a href="#process">Build Process</a>
      <a href="#materials">Materials</a>
      <a href="#stories">Stories</a>
      <a href="#faq">FAQ</a>
    </nav>
    <div class="nav-cta">
      <a class="btn btn-outline" href="#visit">Book a test ride</a>
      <a class="btn btn-dark" href="#configure">Configure yours</a>
      <button class="menu-btn" id="menuBtn" aria-label="Open menu" aria-expanded="false">☰</button>
    </div>
  </div>
</header>

<main id="top">

<!-- HERO -->
<section class="hero">
  <div class="container hero-grid">
    <div>
      <div class="hero-badge"><i></i> Built to order · One frame at a time · Copenhagen</div>
      <h1>A cargo bike built around <em>your family.</em> Not a catalogue.</h1>
      <p class="lead">We are a small workshop in Refshaleøen. Every Lumen is welded, painted and assembled by hand for one customer — sized to you, your children, and the streets you actually ride. No stock bikes. No discounts. No surprises.</p>
      <div class="hero-actions">
        <a class="btn btn-accent" href="#configure">Configure your bike →</a>
        <a class="btn btn-outline" href="#visit">Visit the workshop</a>
      </div>
      <div class="hero-trust">
        <span><span class="check">✓</span> Test ride before you commit</span>
        <span><span class="check">✓</span> Deposit refundable for 14 days</span>
        <span><span class="check">✓</span> 10-year frame warranty</span>
      </div>
      <div class="hero-stats">
        <div><b><span data-count="214">0</span></b><span>Bikes delivered<br>since 2016</span></div>
        <div><b><span data-count="10">0</span> yrs</b><span>Frame warranty<br>on every build</span></div>
        <div><b><span data-count="40">0</span> km</b><span>Road test before<br>any handover</span></div>
        <div><b><span data-count="7">0</span> wks</b><span>From signed design<br>to delivery</span></div>
      </div>
    </div>

    <div class="hero-art">
      <svg viewBox="0 0 880 520" role="img" aria-label="Illustration of a Lumen Havn front-loader cargo bike in mustard">
        <circle cx="640" cy="150" r="155" fill="#E8A83E" opacity="0.20"/>
        <ellipse cx="450" cy="458" rx="350" ry="16" fill="#18201C" opacity="0.07"/>
        <line x1="40" y1="452" x2="840" y2="452" stroke="#18201C" stroke-width="2"/>
        <line x1="40" y1="452" x2="840" y2="452" stroke="#18201C" stroke-width="2" stroke-dasharray="2 14" opacity="0.3"/>
        <!-- rear wheel -->
        <g>
          <circle cx="192" cy="378" r="76" fill="none" stroke="#18201C" stroke-width="6"/>
          <circle cx="192" cy="378" r="56" fill="none" stroke="#18201C" stroke-width="1.4" opacity="0.35"/>
          <path d="M192 378 L192 322 M192 378 L240 350 M192 378 L144 350 M192 378 L192 434" stroke="#18201C" stroke-width="1.4" opacity="0.4"/>
          <circle cx="192" cy="378" r="11" fill="#18201C"/>
          <path d="M112 360 A86 86 0 0 1 272 360" fill="none" stroke="#C56A1D" stroke-width="5" stroke-linecap="round"/>
        </g>
        <!-- front wheel -->
        <g>
          <circle cx="700" cy="378" r="76" fill="none" stroke="#18201C" stroke-width="6"/>
          <circle cx="700" cy="378" r="56" fill="none" stroke="#18201C" stroke-width="1.4" opacity="0.35"/>
          <path d="M700 378 L700 322 M700 378 L748 350 M700 378 L652 350 M700 378 L700 434" stroke="#18201C" stroke-width="1.4" opacity="0.4"/>
          <circle cx="700" cy="378" r="11" fill="#18201C"/>
          <path d="M620 360 A86 86 0 0 1 780 360" fill="none" stroke="#C56A1D" stroke-width="5" stroke-linecap="round"/>
        </g>
        <!-- cargo box -->
        <path d="M462 258 L618 258 L644 372 L484 372 Z" fill="#D98E3A" stroke="#18201C" stroke-width="3" stroke-linejoin="round"/>
        <path d="M462 258 L618 258 L626 288 L472 288 Z" fill="#F0C369"/>
        <circle cx="520" cy="302" r="16" fill="#FFF8EB" stroke="#18201C" stroke-width="2.5"/>
        <circle cx="568" cy="302" r="16" fill="#FFF8EB" stroke="#18201C" stroke-width="2.5"/>
        <path d="M496 340 Q520 318 544 340 L544 356 L496 356 Z" fill="#3E5648"/>
        <path d="M548 340 Q570 322 590 340 L590 356 L548 356 Z" fill="#3E5648"/>
        <!-- frame -->
        <g stroke="#18201C" stroke-width="7" stroke-linecap="round" fill="none">
          <path d="M192 378 L382 370"/>
          <path d="M342 214 L192 378"/>
          <path d="M342 214 L382 370"/>
          <path d="M382 370 L556 238"/>
          <path d="M556 238 L700 378"/>
          <path d="M548 202 L560 252"/>
          <path d="M560 252 L382 370" opacity="0.9"/>
        </g>
        <path d="M382 370 L556 238" stroke="#C56A1D" stroke-width="3" stroke-linecap="round"/>
        <!-- crank / chain -->
        <circle cx="382" cy="370" r="19" fill="none" stroke="#18201C" stroke-width="4"/>
        <path d="M382 370 L192 378" stroke="#18201C" stroke-width="2" stroke-dasharray="4 4"/>
        <!-- seat & bars -->
        <path d="M342 214 L348 198" stroke="#18201C" stroke-width="6" stroke-linecap="round"/>
        <ellipse cx="350" cy="196" rx="30" ry="9" fill="#18201C"/>
        <path d="M548 202 L582 182" stroke="#18201C" stroke-width="6" stroke-linecap="round"/>
        <path d="M552 186 L610 186" stroke="#18201C" stroke-width="6" stroke-linecap="round"/>
        <circle cx="582" cy="182" r="6" fill="#18201C"/>
        <!-- kickstand -->
        <path d="M382 370 L340 452" stroke="#18201C" stroke-width="4" stroke-linecap="round"/>
        <!-- annotations -->
        <g font-family="-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif" font-size="11" letter-spacing="1.5" fill="#18201C">
          <text x="70" y="120" font-weight="800">220 L BIRCH BOX</text>
          <path d="M180 128 L470 240" stroke="#18201C" stroke-width="1.2"/>
          <circle cx="470" cy="240" r="4" fill="#C56A1D"/>
          <text x="90" y="175" font-weight="800">REYNOLDS 853 FRAME</text>
          <path d="M220 182 L430 300" stroke="#18201C" stroke-width="1.2"/>
          <circle cx="430" cy="300" r="4" fill="#C56A1D"/>
        </g>
      </svg>
      <div class="hero-caption">
        <span><b>Lumen Havn</b> · Mustard over Reynolds 853</span>
        <span>Build #213 · Delivered May 2026</span>
      </div>
    </div>
  </div>
</section>

<!-- STRIP -->
<div class="strip">
  <div class="container">
    <div><b>Hand-welded in Copenhagen</b><span>Not imported, not assembled from kits</span></div>
    <div><b>Every bike test-ridden loaded</b><span>Brakes, steering &amp; box tested with 80 kg</span></div>
    <div><b>All repairs in-house</b><span>Same workshop that built your frame</span></div>
    <div><b>Spare parts for 10 years</b><span>Standard, serviceable components only</span></div>
  </div>
</div>

<!-- WHY 4000 -->
<section id="why">
  <div class="container why-grid">
    <div>
      <div class="eyebrow">Why it costs what it costs</div>
      <h2>4,000 euros is not for a logo.<br>It’s for 60 hours of labour.</h2>
      <p class="lead" style="margin:20px 0 28px">A mass-produced cargo bike costs less because it is designed to be replaced. Ours is designed to be repaired for a decade. Here is exactly where your money goes on a typical Havn build — before options.</p>

      <div class="price-card">
        <h3>Where 34,900 kr goes</h3>
        <p class="small muted" style="margin:0">Havn base build, incl. 25% Danish VAT. No hidden fees. We itemise every build before you sign.</p>
        <div class="bar-row"><label>Frame, welding &amp; alignment <span>38%</span></label><div class="bar"><i style="width:38%"></i></div></div>
        <div class="bar-row"><label>Components (gears, brakes, dynamo) <span>28%</span></label><div class="bar"><i style="width:28%"></i></div></div>
        <div class="bar-row"><label>Box, powder coat &amp; finishing <span>16%</span></label><div class="bar"><i style="width:16%"></i></div></div>
        <div class="bar-row"><label>Assembly, testing &amp; handover <span>18%</span></label><div class="bar"><i style="width:18%"></i></div></div>
        <div class="included">
          <div><span class="check">✓</span> Fitted to your measurements</div>
          <div><span class="check">✓</span> 40 km loaded road test</div>
          <div><span class="check">✓</span> First service at 500 km free</div>
          <div><span class="check">✓</span> Lifetime geometry check</div>
        </div>
      </div>
    </div>

    <div class="why-points">
      <div class="why-point reveal">
        <div class="num">01</div>
        <div><h3>Built for the rider, not the average</h3><p class="muted">We measure your inseam, shoulder width and the children you carry. Frame length, box height and stem are adjusted before a single tube is cut. That is why it fits — and why it holds value.</p></div>
      </div>
      <div class="why-point reveal">
        <div class="num">02</div>
        <div><h3>Materials you can service forever</h3><p class="muted">Reynolds 853 steel, FSC-certified birch, Shimano and Bosch components stocked in Denmark. No proprietary batteries, no discontinued parts, no “send it back to the factory”.</p></div>
      </div>
      <div class="why-point reveal">
        <div class="num">03</div>
        <div><h3>Tested the way you will use it</h3><p class="muted">Every bike leaves with 80 kg in the box. We brake hard, ride one-handed, climb Refshalebakken loaded. If something flexes or rattles, we fix it before you see it.</p></div>
      </div>
      <div class="why-point reveal">
        <div class="num">04</div>
        <div><h3>Transparent, in writing</h3><p class="muted">You sign a detailed spec sheet with price, timeline and warranty before we build. Deposit is 20% and refundable for 14 days. Balance is only due at handover, after you have ridden it.</p></div>
      </div>
      <div style="background:#FFF6E8;border:1px solid var(--line);border-radius:16px;padding:22px" class="reveal">
        <b style="font-family:var(--serif);font-size:20px;font-weight:500">The honest maths</b>
        <p class="muted" style="margin:8px 0 0;font-size:14.5px">A 15,000 kr import bike replaced every 4 years costs <b style="color:var(--ink)">3,750 kr per year</b>. A Lumen at 29,900 kr lasting 12+ years costs <b style="color:var(--ink)">under 2,500 kr per year</b> — and you keep the frame.</p>
      </div>
    </div>
  </div>
</section>

<!-- MODELS -->
<section id="models" class="alt">
  <div class="container">
    <div class="section-head">
      <div class="eyebrow">Three frames · Endless details</div>
      <h2>Choose your length.<br>We handle the rest.</h2>
      <p class="lead">All three share the same steel, the same workshop and the same warranty. The difference is how much life you need to carry.</p>
    </div>
    <div class="models">
      <!-- BY -->
      <article class="model reveal">
        <div class="model-top"><span class="tag">For city life · 1 child</span><h3>Lumen By</h3></div>
        <div class="model-art">
          <svg viewBox="0 0 320 170" role="img" aria-label="Lumen By compact cargo bike illustration">
            <line x1="10" y1="148" x2="310" y2="148" stroke="#18201C" stroke-width="2"/>
            <circle cx="62" cy="118" r="30" fill="none" stroke="#18201C" stroke-width="4"/><circle cx="258" cy="118" r="30" fill="none" stroke="#18201C" stroke-width="4"/>
            <path d="M62 118 L118 56 M118 56 L128 118 M128 118 L188 62 M188 62 L258 118 M178 48 L192 62" stroke="#18201C" stroke-width="4" fill="none" stroke-linecap="round"/>
            <rect x="160" y="48" width="72" height="48" rx="4" fill="#D98E3A" stroke="#18201C" stroke-width="2.5"/>
          </svg>
        </div>
        <div class="model-body">
          <div class="model-price">29,900 kr <small>· approx. 4,010 €</small></div>
          <p class="small muted">The compact. Fits in a standard shed, carries one child or a large weekly shop, and turns in tight courtyard entrances.</p>
          <ul class="spec-list">
            <li><span>Box volume</span><b>180 L</b></li>
            <li><span>Payload</span><b>60 kg</b></li>
            <li><span>Weight</span><b>24.5 kg</b></li>
            <li><span>Best for</span><b>1 child · city</b></li>
          </ul>
          <a class="btn btn-outline" href="#configure">Configure By</a>
        </div>
      </article>
      <!-- HAVN -->
      <article class="model reveal">
        <div class="model-top"><span class="tag">Most popular · 2 children</span><h3>Lumen Havn</h3></div>
        <div class="model-art">
          <svg viewBox="0 0 320 170" role="img" aria-label="Lumen Havn long cargo bike illustration">
            <line x1="10" y1="148" x2="310" y2="148" stroke="#18201C" stroke-width="2"/>
            <circle cx="56" cy="118" r="30" fill="none" stroke="#18201C" stroke-width="4"/><circle cx="264" cy="118" r="30" fill="none" stroke="#18201C" stroke-width="4"/>
            <path d="M56 118 L112 54 M112 54 L122 118 M122 118 L182 60 M182 60 L264 118 M172 46 L186 60" stroke="#18201C" stroke-width="4" fill="none" stroke-linecap="round"/>
            <rect x="150" y="44" width="96" height="52" rx="4" fill="#3E5648" stroke="#18201C" stroke-width="2.5"/>
          </svg>
        </div>
        <div class="model-body">
          <div class="model-price">34,900 kr <small>· approx. 4,680 €</small></div>
          <p class="small muted">Our family workhorse. Two children with room for bags, or one child plus a surfboard, a dog, or a week of groceries.</p>
          <ul class="spec-list">
            <li><span>Box volume</span><b>220 L</b></li>
            <li><span>Payload</span><b>120 kg</b></li>
            <li><span>Weight</span><b>27 kg</b></li>
            <li><span>Best for</span><b>2 children · family</b></li>
          </ul>
          <a class="btn btn-dark" href="#configure">Configure Havn</a>
        </div>
      </article>
      <!-- O -->
      <article class="model reveal">
        <div class="model-top"><span class="tag">Extra long · Work &amp; 3 children</span><h3>Lumen Ø</h3></div>
        <div class="model-art">
          <svg viewBox="0 0 320 170" role="img" aria-label="Lumen O extra long cargo bike illustration">
            <line x1="10" y1="148" x2="310" y2="148" stroke="#18201C" stroke-width="2"/>
            <circle cx="50" cy="118" r="30" fill="none" stroke="#18201C" stroke-width="4"/><circle cx="270" cy="118" r="30" fill="none" stroke="#18201C" stroke-width="4"/>
            <path d="M50 118 L104 54 M104 54 L114 118 M114 118 L176 58 M176 58 L270 118 M166 44 L180 58" stroke="#18201C" stroke-width="4" fill="none" stroke-linecap="round"/>
            <rect x="142" y="42" width="116" height="54" rx="4" fill="#C56A1D" stroke="#18201C" stroke-width="2.5"/>
          </svg>
        </div>
        <div class="model-body">
          <div class="model-price">39,900 kr <small>· approx. 5,350 €</small></div>
          <p class="small muted">For three children, trades, or delivery. The Ø carries what a small van does — without parking, taxes or CO₂.</p>
          <ul class="spec-list">
            <li><span>Box volume</span><b>280 L</b></li>
            <li><span>Payload</span><b>160 kg</b></li>
            <li><span>Weight</span><b>32 kg</b></li>
            <li><span>Best for</span><b>3 children · work</b></li>
          </ul>
          <a class="btn btn-outline" href="#configure">Configure Ø</a>
        </div>
      </article>
    </div>
    <p class="small muted" style="margin-top:22px;text-align:center">All prices include 25% Danish VAT, dynamo lighting, mudguards, kickstand and first service. Delivery across Denmark 1,200 kr · EU by arrangement.</p>
  </div>
</section>

<!-- CONFIGURATOR -->
<section id="configure">
  <div class="container">
    <div class="section-head">
      <div class="eyebrow">Interactive configurator</div>
      <h2>Build your spec.<br>See the real price, instantly.</h2>
      <p class="lead">No “call for price”. Choose below and watch the total, deposit and delivery date update. This is the price we will put in writing.</p>
    </div>

    <div class="config-grid">
      <div class="config-panel">
        <div class="config-step">
          <h3>1 · Model</h3><p>Frame length and box size. We will confirm fit at your consultation.</p>
          <div class="options cols3">
            <label class="option"><input type="radio" name="model" value="Lumen By" data-price="29900" checked><b>Lumen By</b><span>Compact · 180 L · 1 child</span><span class="price">29,900 kr</span></label>
            <label class="option"><input type="radio" name="model" value="Lumen Havn" data-price="34900"><b>Lumen Havn</b><span>Long · 220 L · 2 children</span><span class="price">34,900 kr</span></label>
            <label class="option"><input type="radio" name="model" value="Lumen Ø" data-price="39900"><b>Lumen Ø</b><span>Extra long · 280 L · 3 / work</span><span class="price">39,900 kr</span></label>
          </div>
        </div>

        <div class="config-step">
          <h3>2 · Drive</h3><p>All motors are standard Danish-serviceable systems with local spare parts.</p>
          <div class="options cols3">
            <label class="option"><input type="radio" name="motor" value="Muscle only" data-price="0" checked><b>Muscle only</b><span>Lightest, simplest, silent</span><span class="price">Included</span></label>
            <label class="option"><input type="radio" name="motor" value="Shimano EP8" data-price="7900"><b>Shimano EP8</b><span>250 W · 85 Nm · 630 Wh</span><span class="price">+ 7,900 kr</span></label>
            <label class="option"><input type="radio" name="motor" value="Bosch Cargo Line" data-price="10900"><b>Bosch Cargo Line</b><span>250 W · 85 Nm · cargo tuned</span><span class="price">+ 10,900 kr</span></label>
          </div>
        </div>

        <div class="config-step">
          <h3>3 · Gears</h3><p>Hub gears need no adjustment and survive Danish winters.</p>
          <div class="options cols3">
            <label class="option"><input type="radio" name="gears" value="Single speed" data-price="0" checked><b>Single speed</b><span>For flat Copenhagen</span><span class="price">Included</span></label>
            <label class="option"><input type="radio" name="gears" value="Shimano Nexus 8" data-price="2900"><b>Nexus 8</b><span>Sealed hub · low upkeep</span><span class="price">+ 2,900 kr</span></label>
            <label class="option"><input type="radio" name="gears" value="Pinion 11" data-price="6900"><b>Pinion 11</b><span>Gearbox · 600% range</span><span class="price">+ 6,900 kr</span></label>
          </div>
        </div>

        <div class="config-step">
          <h3>4 · Box finish</h3><p>Panels are bolted, not glued — a damaged panel is a 20-minute fix.</p>
          <div class="options cols3">
            <label class="option"><input type="radio" name="box" value="Natural birch" data-price="0" checked><b>Natural birch</b><span>Linseed oil · FSC plywood</span><span class="price">Included</span></label>
            <label class="option"><input type="radio" name="box" value="Painted RAL colour" data-price="2700"><b>Painted RAL</b><span>Your colour from the RAL chart</span><span class="price">+ 2,700 kr</span></label>
            <label class="option"><input type="radio" name="box" value="Aluminium" data-price="4400"><b>Aluminium</b><span>Lightest, most durable</span><span class="price">+ 4,400 kr</span></label>
          </div>
        </div>

        <div class="config-step">
          <h3>5 · Extras</h3><p>Only add what you will actually use. We will talk you out of the rest.</p>
          <div class="options cols2">
            <label class="option check"><span><b>Pair of child seats</b><span>With 5-point harness</span></span><span class="price">+1,900 kr</span><input type="checkbox" name="extra" value="Child seats (pair)" data-price="1900"></label>
            <label class="option check"><span><b>Rain cover</b><span>Full box cover, Danish made</span></span><span class="price">+1,450 kr</span><input type="checkbox" name="extra" value="Rain cover" data-price="1450"></label>
            <label class="option check"><span><b>Second battery</b><span>Motor models only</span></span><span class="price">+3,900 kr</span><input type="checkbox" name="extra" value="Second battery" data-price="3900"></label>
            <label class="option check"><span><b>Lighting package</b><span>Upgraded dynamo + rear rack light</span></span><span class="price">+1,200 kr</span><input type="checkbox" name="extra" value="Lighting package" data-price="1200"></label>
            <label class="option check"><span><b>Abus Granit lock</b><span>Insurance approved</span></span><span class="price">+950 kr</span><input type="checkbox" name="extra" value="Abus Granit lock" data-price="950"></label>
            <label class="option check"><span><b>Cargo net &amp; straps</b><span>For work and oversize loads</span></span><span class="price">+590 kr</span><input type="checkbox" name="extra" value="Cargo net & straps" data-price="590"></label>
          </div>
        </div>
      </div>

      <aside class="summary" aria-live="polite">
        <div style="font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent2);font-weight:800">Your build summary</div>
        <h3 id="sumModel">Lumen By</h3>
        <p class="muted small" style="margin:0">Built to order in Refshaleøen. Price fixed in writing before we start.</p>
        <div class="summary-list">
          <div><span>Model</span><b id="sumModel2">Lumen By</b></div>
          <div><span>Drive</span><b id="sumMotor">Muscle only</b></div>
          <div><span>Gears</span><b id="sumGears">Single speed</b></div>
          <div><span>Box</span><b id="sumBox">Natural birch</b></div>
          <div><span>Extras</span><b id="sumExtras">None</b></div>
          <div><span>Build time</span><b id="sumLead">7 weeks</b></div>
          <div><span>Estimated delivery</span><b id="sumDate">—</b></div>
        </div>
        <div class="total-row"><span>Total incl. VAT</span><b id="totalPrice">29,900 kr</b></div>
        <span class="eur" id="totalEur">≈ 4,010 €</span>
        <div class="deposit-box">
          <div style="display:flex;justify-content:space-between;gap:12px"><span style="font-size:13px;color:#CFC8B6">Due today (20% deposit)<br><span style="font-size:11.5px">Refundable for 14 days</span></span><b id="depositPrice" style="font-size:20px">5,980 kr</b></div>
          <div style="display:flex;justify-content:space-between;gap:12px;margin-top:12px;border-top:1px solid rgba(232,168,62,.3);padding-top:12px"><span style="font-size:13px;color:#CFC8B6">On delivery, after test ride</span><b id="balancePrice">23,920 kr</b></div>
        </div>
        <a class="btn btn-accent" href="#visit">Reserve this build slot →</a>
        <p class="summary-note">No payment is taken now. We confirm availability, fit and final spec at your free consultation first.</p>
      </aside>
    </div>
  </div>
</section>

<!-- PROCESS -->
<section id="process" class="alt">
  <div class="container">
    <div class="section-head">
      <div class="eyebrow">How ordering works</div>
      <h2>Seven weeks.<br>Six clear steps.</h2>
      <p class="lead">You will always know what is happening with your bike. We send photos from the workshop each Friday during your build.</p>
    </div>
    <div class="process">
      <div class="step reveal"><div class="step-top"><span class="step-no">01</span><span class="step-time">45 min</span></div><h3>Consultation &amp; test ride</h3><p>Visit us or book a video call. Bring the children. We ride, measure, and talk honestly about whether a cargo bike is right for you.</p></div>
      <div class="step reveal"><div class="step-top"><span class="step-no">02</span><span class="step-time">Week 1</span></div><h3>Design &amp; geometry</h3><p>You receive a CAD mockup and a full itemised spec sheet. Nothing is ordered until you sign it. Changes are free at this stage.</p></div>
      <div class="step reveal"><div class="step-top"><span class="step-no">03</span><span class="step-time">Weeks 2–4</span></div><h3>Frame building</h3><p>Your Reynolds 853 tubeset is cut, TIG-welded in a jig and checked for alignment three times. This is the heart of the bike.</p></div>
      <div class="step reveal"><div class="step-top"><span class="step-no">04</span><span class="step-time">Weeks 4–6</span></div><h3>Paint &amp; box</h3><p>Powder coating in your colour, birch box built and oiled, electronics fitted and wired. We photograph every stage for you.</p></div>
      <div class="step reveal"><div class="step-top"><span class="step-no">05</span><span class="step-time">Weeks 6–7</span></div><h3>Assembly &amp; road test</h3><p>Full assembly, then 40 km of loaded testing around Refshaleøen. Brakes, steering, shifting and rattles — fixed before handover.</p></div>
      <div class="step reveal"><div class="step-top"><span class="step-no">06</span><span class="step-time">Week 7–8</span></div><h3>Handover &amp; first service</h3><p>We fit the bike to you in person, adjust seats and box, and book your free 500 km service. Balance is due only now.</p></div>
    </div>
  </div>
</section>

<!-- MATERIALS -->
<section id="materials">
  <div class="container">
    <div class="section-head">
      <div class="eyebrow">Materials &amp; workshop</div>
      <h2>Steel, birch, and<br>components that last.</h2>
    </div>
    <div class="mat-grid">
      <div>
        <div class="tabs" role="tablist">
          <button class="tab-btn active" data-tab="frame">Frame</button>
          <button class="tab-btn" data-tab="box">Box</button>
          <button class="tab-btn" data-tab="components">Components</button>
          <button class="tab-btn" data-tab="finish">Finish</button>
        </div>

        <div class="tab-panel active" data-panel="frame">
          <h3>Reynolds 853 — why steel?</h3>
          <p class="muted">Steel flexes a little, rides quietly, and can be repaired by any good frame builder in 20 years. Aluminium and carbon cargo frames cannot. We weld every frame in-house.</p>
          <table class="spec-table">
            <tr><td>Tubeset</td><td>Reynolds 853 air-hardened steel</td></tr>
            <tr><td>Welding</td><td>TIG, in a single jig, checked 3×</td></tr>
            <tr><td>Geometry</td><td>Custom per rider, from your measurements</td></tr>
            <tr><td>Warranty</td><td>10 years on frame &amp; fork</td></tr>
          </table>
        </div>
        <div class="tab-panel" data-panel="box">
          <h3>FSC birch plywood, bolted panels</h3>
          <p class="muted">Our box is not a moulded tub you replace if it cracks. It is individual panels, oiled with linseed, bolted through a steel subframe. A scratched panel is replaced in minutes.</p>
          <table class="spec-table">
            <tr><td>Material</td><td>FSC-certified birch, 12 mm</td></tr>
            <tr><td>Finish</td><td>Linseed oil, re-oiled annually</td></tr>
            <tr><td>Volume</td><td>180 / 220 / 280 L by model</td></tr>
            <tr><td>Repairs</td><td>Single panels available for 10 years</td></tr>
          </table>
        </div>
        <div class="tab-panel" data-panel="components">
          <h3>Standard parts. Local service.</h3>
          <p class="muted">We deliberately avoid exotic parts. Everything on a Lumen can be serviced by us — or any competent workshop in Denmark — with parts stocked locally.</p>
          <table class="spec-table">
            <tr><td>Motors</td><td>Shimano EP8 / Bosch Cargo Line</td></tr>
            <tr><td>Gears</td><td>Shimano Nexus 8 / Pinion 11</td></tr>
            <tr><td>Brakes</td><td>Shimano hydraulic, cargo rated</td></tr>
            <tr><td>Lighting</td><td>Dynamo as standard, StVZO approved</td></tr>
          </table>
        </div>
        <div class="tab-panel" data-panel="finish">
          <h3>Powder coat, not paint</h3>
          <p class="muted">Frames are powder coated in-house in any RAL colour. It resists chips, salt and shopping-trolley impacts far better than wet paint — and we can refinish a panel for you years later.</p>
          <table class="spec-table">
            <tr><td>Process</td><td>Powder coat, oven cured</td></tr>
            <tr><td>Colours</td><td>Full RAL chart, matte or gloss</td></tr>
            <tr><td>Refinishing</td><td>Available in workshop, from 1,800 kr</td></tr>
          </table>
        </div>
      </div>

      <div class="diagram reveal">
        <h3>Custom geometry, explained</h3>
        <p class="small muted" style="margin:0 0 14px">Every frame starts from your measurements. This is a Havn geometry for a 172 cm rider — yours will differ.</p>
        <svg viewBox="0 0 520 340" role="img" aria-label="Frame geometry diagram with measurements">
          <line x1="30" y1="300" x2="490" y2="300" stroke="#18201C" stroke-width="2"/>
          <circle cx="110" cy="260" r="42" fill="none" stroke="#18201C" stroke-width="4"/>
          <circle cx="420" cy="260" r="42" fill="none" stroke="#18201C" stroke-width="4"/>
          <path d="M110 260 L210 140 L230 260 L330 155 L420 260" fill="none" stroke="#18201C" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M230 260 L330 155" stroke="#C56A1D" stroke-width="3"/>
          <g font-family="-apple-system,sans-serif" font-size="11" fill="#18201C" font-weight="700" letter-spacing="1">
            <text x="180" y="120">SEAT TUBE 620 MM</text>
            <path d="M215 128 L212 138" stroke="#18201C" stroke-width="1"/>
            <text x="250" y="235">DOWN TUBE</text>
            <text x="300" y="120">HEAD TUBE 110 MM</text>
            <path d="M335 128 L332 152" stroke="#18201C" stroke-width="1"/>
            <text x="150" y="285">WHEELBASE 1,480 MM</text>
          </g>
          <g stroke="#C56A1D" stroke-width="1.5"><line x1="110" y1="315" x2="420" y2="315"/><line x1="110" y1="308" x2="110" y2="322"/><line x1="420" y1="308" x2="420" y2="322"/></g>
        </svg>
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px;font-size:13px">
          <div style="background:#F8F4EC;border:1px solid var(--line);border-radius:10px;padding:12px"><b>Reach &amp; stack</b><br><span class="muted">Adjusted to your arms and shoulders</span></div>
          <div style="background:#F8F4EC;border:1px solid var(--line);border-radius:10px;padding:12px"><b>Box height</b><br><span class="muted">Lowered for children, raised for cargo</span></div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- OWNERSHIP -->
<section id="ownership" class="dark-sec">
  <div class="container">
    <div class="section-head">
      <div class="eyebrow">Ownership</div>
      <h2>We build it.<br>We look after it.</h2>
      <p class="lead" style="color:#CFC8B6">A cargo bike is a 12-year commitment. Ours is too. Every Lumen comes with a relationship, not just a receipt.</p>
    </div>
    <div class="own-grid">
      <div class="own-card reveal"><b>10-year frame warranty</b><p>Welding, fork and subframe. In writing, on your spec sheet, with our CVR number on it.</p></div>
      <div class="own-card reveal"><b>2-year component warranty</b><p>Motors, gears, brakes and electronics — through Danish service partners.</p></div>
      <div class="own-card reveal"><b>Free 500 km service</b><p>Chain, brakes, bolts and steering checked after you have bedded the bike in.</p></div>
      <div class="own-card reveal"><b>Lifetime geometry check</b><p>Bring it in any year. We check alignment and fit for free, as long as you own it.</p></div>
    </div>

    <table class="compare reveal" aria-label="Comparison between Lumen and mass produced cargo bikes">
      <thead><tr><th></th><th>Lumen Cycles</th><th>Mass-produced import</th></tr></thead>
      <tbody>
        <tr><td>Price</td><td>29,900–39,900 kr</td><td>12,000–18,000 kr</td></tr>
        <tr><td>Frame warranty</td><td>10 years</td><td>2 years</td></tr>
        <tr><td>Expected life</td><td>12+ years, repairable</td><td>3–5 years</td></tr>
        <tr><td>Fit</td><td>Measured &amp; custom geometry</td><td>One size, adjustable stem</td></tr>
        <tr><td>Repairs</td><td>In-house, same workshop</td><td>Dealer dependent, parts may vanish</td></tr>
        <tr><td>Cost per year</td><td>≈ 2,500 kr / year</td><td>≈ 3,750 kr / year</td></tr>
      </tbody>
    </table>
    <p class="small" style="color:#B8B2A2;margin-top:16px">Resale: Tasked frame, documented service history and transferable warranty. Our bikes typically resell at 55–65% after three years.</p>
  </div>
</section>

<!-- STORIES -->
<section id="stories">
  <div class="container">
    <div class="section-head">
      <div class="eyebrow">Owners</div>
      <h2>214 families.<br>214 different mornings.</h2>
    </div>
    <div class="stories">
      <article class="story reveal">
        <div class="quote-mark">“</div>
        <p>I was nervous about the price. Then I rode the test bike with both kids and 3 kg of strawberries. It just… worked. Two years later I still text the workshop photos from our rides.</p>
        <div class="story-meta"><div class="avatar">MH</div><div><b>Mette H.</b><span>Nørrebro · Lumen Havn since 2024</span></div></div>
      </article>
      <article class="story reveal">
        <div class="quote-mark">“</div>
        <p>As a baker I need the Ø to carry 140 kg before sunrise, every day. They built it around my delivery route, not a catalogue. It has paid for itself against the van.</p>
        <div class="story-meta"><div class="avatar">JL</div><div><b>Jonas L.</b><span>Østerbro · Lumen Ø, work build</span></div></div>
      </article>
      <article class="story reveal">
        <div class="quote-mark">“</div>
        <p>What sold us was the spec sheet. Every kr itemised, deposit refundable, and they talked us out of the motor we thought we needed. That honesty is rare.</p>
        <div class="story-meta"><div class="avatar">SA</div><div><b>Sofie &amp; Anders</b><span>Valby · Lumen By since 2025</span></div></div>
      </article>
    </div>
  </div>
</section>

<!-- FAQ -->
<section id="faq" class="alt">
  <div class="container">
    <div class="section-head" style="margin-left:auto;margin-right:auto;text-align:center">
      <div class="eyebrow" style="justify-content:center">Questions, answered plainly</div>
      <h2>Everything you are<br>wondering before you spend 4,000 euros.</h2>
    </div>
    <div class="faq-wrap">
      <div class="faq">
        <button aria-expanded="false">Why does a Lumen cost 4,000 euros when imports cost half? <span>+</span></button>
        <div class="faq-panel"><p>Because we spend roughly 60 hours per bike that imports spend near zero on: custom frame building, in-house powder coating, a bolted birch box, and 40 km of loaded testing. You also get a 10-year frame warranty and a workshop that will still be here to honour it. An import bike is cheaper to buy and more expensive to own — and it is designed to be replaced, not repaired.</p></div>
      </div>
      <div class="faq">
        <button aria-expanded="false">How long will I wait? <span>+</span></button>
        <div class="faq-panel"><p>Currently about 7 weeks from signed design to delivery. Pinion gearboxes and custom RAL colours can add 1–2 weeks. We will give you a date in writing before you pay the deposit, and photos every Friday during your build. We build a maximum of 4 bikes at a time — we will not take more orders than we can build well.</p></div>
      </div>
      <div class="faq">
        <button aria-expanded="false">Can I try one before I commit? <span>+</span></button>
        <div class="faq-panel"><p>Yes — and we insist. Book a free test ride at the workshop. You will ride a demo bike loaded, with children if you wish. There is no obligation and no sales pressure. If a cargo bike is not right for your life, we will tell you.</p></div>
      </div>
      <div class="faq">
        <button aria-expanded="false">Is the deposit refundable? <span>+</span></button>
        <div class="faq-panel"><p>Yes, in full for 14 days after you sign the spec sheet, for any reason. After that, the deposit covers materials ordered for your build. The balance (80%) is only due at handover, after you have ridden your finished bike.</p></div>
      </div>
      <div class="faq">
        <button aria-expanded="false">What happens if something breaks? <span>+</span></button>
        <div class="faq-panel"><p>Bring it to Refshaleøen. We built it, so we fix it — usually within a week. Frame warranty is 10 years, components 2 years. We stock spare parts for 10 years and use only standard, Danish-serviceable components, so you are never locked into a discontinued system.</p></div>
      </div>
      <div class="faq">
        <button aria-expanded="false">Do you deliver outside Copenhagen? <span>+</span></button>
        <div class="faq-panel"><p>Yes. Delivery across Denmark is 1,200 kr, with a full handover video call and a local workshop check arranged for your first service. EU delivery is by arrangement — contact us and we will quote it honestly before you order.</p></div>
      </div>
    </div>
  </div>
</section>

<!-- VISIT -->
<section id="visit">
  <div class="container">
    <div class="section-head">
      <div class="eyebrow">Visit us</div>
      <h2>Come and ride one.<br>Then decide.</h2>
      <p class="lead">The best way to understand a Lumen is to ride it loaded, in the rain if possible. Book a consultation — it is free, takes 45 minutes, and ends with coffee, not a contract.</p>
    </div>
    <div class="visit-grid">
      <aside class="visit-card">
        <h3>The workshop</h3>
        <p class="small">Refshalevej 167A, 1432 Copenhagen K<br>Near Refshaleøen harbour — parking for bikes and cars in the courtyard.</p>
        <div style="margin-top:18px">
          <div class="info-row"><span>Opening</span><b>Tue–Sat · 10:00–17:00</b></div>
          <div class="info-row"><span>Test rides</span><b>Free, by booking</b></div>
          <div class="info-row"><span>Phone</span><b>+45 32 54 18 90</b></div>
          <div class="info-row"><span>Email</span><b>hej@lumencycles.dk</b></div>
          <div class="info-row"><span>CVR</span><b>38 47 12 56</b></div>
          <div class="info-row"><span>Build slots</span><b>Max 4 bikes at a time</b></div>
        </div>
        <p class="small" style="margin-top:20px;color:#B8B2A2">We reply within one working day. If we are mid-weld, the phone may go to voicemail — leave a message and we will call back the same day.</p>
        <div style="background:rgba(232,168,62,.12);border:1px solid rgba(232,168,62,.35);border-radius:12px;padding:16px;margin-top:18px;font-size:13.5px">
          <b style="color:#FFF8EB">What to bring:</b> Your children (if relevant), a realistic load, and any questions about routes, storage or winter riding. We have rain gear.
        </div>
      </aside>

      <div class="form-card">
        <h3 style="margin-bottom:6px">Book a free consultation</h3>
        <p class="muted small" style="margin:0 0 22px">Tell us a little about your life with a bike. We will confirm a time and have the right demo ready.</p>
        <form id="bookingForm" novalidate>
          <div class="form-grid">
            <div class="field"><label for="name">Full name *</label><input id="name" name="name" type="text" required placeholder="Maria Jensen"></div>
            <div class="field"><label for="email">Email *</label><input id="email" name="email" type="email" required placeholder="maria@example.dk"></div>
            <div class="field"><label for="phone">Phone</label><input id="phone" name="phone" type="tel" placeholder="+45 …"></div>
            <div class="field"><label for="interest">I am interested in</label>
              <select id="interest" name="interest">
                <option>Lumen By — compact</option><option selected>Lumen Havn — family</option><option>Lumen Ø — extra long / work</option><option>Not sure yet — advise me</option>
              </select>
            </div>
            <div class="field"><label for="date">Preferred date</label><input id="date" name="date" type="date"></div>
            <div class="field"><label for="contact">Contact me by</label>
              <select id="contact" name="contact"><option>Email</option><option>Phone call</option><option>Either</option></select>
            </div>
            <div class="field full"><label for="message">Your life with a bike (children, route, load, storage…)</label><textarea id="message" name="message" placeholder="Two children, 4 km to school in Nørrebro, need room for bags…"></textarea></div>
          </div>
          <button class="btn btn-accent" type="submit" style="width:100%;margin-top:20px">Request my consultation →</button>
          <p class="form-note">No payment, no obligation. Your details are only used to arrange your visit. We never share them.</p>
          <div class="form-success" id="formSuccess" role="status">
            <b>Tak — we have your request.</b>
            <span id="successText">We will reply within one working day to confirm your time.</span><br>
            <span class="small muted">Your reference: <b id="refCode" style="font-family:var(--sans);font-size:14px">LC-2026-0000</b> · Keep it for your visit.</span>
          </div>
        </form>
      </div>
    </div>
  </div>
</section>

</main>

<footer>
  <div class="container">
    <div class="footer-grid">
      <div>
        <a class="logo" href="#top" style="color:#FFF8EB"><span class="logo-mark"></span><span>LUMEN<br>CYCLES<small style="color:#B8B2A2">COPENHAGEN · EST. 2016</small></span></a>
        <p class="small" style="max-width:300px;margin-top:18px">Custom cargo bikes, built by hand in Refshaleøen. One frame at a time, for families and small businesses who ride every day.</p>
      </div>
      <div><h4>Explore</h4><a href="#models">Models</a><a href="#configure">Configure</a><a href="#process">Build process</a><a href="#materials">Materials</a></div>
      <div><h4>Trust</h4><a href="#ownership">Warranty</a><a href="#faq">FAQ</a><a href="#stories">Owner stories</a><a href="#visit">Test ride</a></div>
      <div><h4>Workshop</h4><a href="#visit">Refshalevej 167A, Copenhagen K</a><a href="#visit">Tue–Sat 10:00–17:00</a><a href="#visit">+45 32 54 18 90</a><a href="#visit">hej@lumencycles.dk</a></div>
    </div>
    <div class="footer-bottom">
      <span>© <span id="year">2026</span> Lumen Cycles ApS · CVR 38 47 12 56 · Refshalevej 167A, 1432 Copenhagen K</span>
      <span>All prices incl. 25% Danish VAT · 10-year frame warranty · Made in Denmark</span>
    </div>
  </div>
</footer>

<script>
(function(){
  "use strict";
  var fmt = function(n){ return n.toLocaleString('da-DK') + ' kr'; };
  var fmtEur = function(n){ return '≈ ' + Math.round(n/7.46).toLocaleString('da-DK') + ' €'; };

  /* Header */
  var header = document.getElementById('header');
  window.addEventListener('scroll', function(){ header.classList.toggle('scrolled', window.scrollY > 10); }, {passive:true});

  /* Mobile menu */
  var menuBtn = document.getElementById('menuBtn');
  var navLinks = document.getElementById('navLinks');
  menuBtn.addEventListener('click', function(){
    var open = navLinks.classList.toggle('open');
    menuBtn.setAttribute('aria-expanded', open ? 'true' : 'false');
    menuBtn.textContent = open ? '×' : '☰';
  });
  navLinks.addEventListener('click', function(e){
    if(e.target.tagName === 'A'){ navLinks.classList.remove('open'); menuBtn.textContent='☰'; menuBtn.setAttribute('aria-expanded','false'); }
  });

  /* Counters + reveal */
  function animateCount(el){
    var target = parseInt(el.getAttribute('data-count'),10);
    var start = null, dur = 1100;
    function tick(ts){
      if(!start) start = ts;
      var p = Math.min((ts-start)/dur, 1);
      el.textContent = Math.round(target * (1 - Math.pow(1-p,3)));
      if(p < 1) requestAnimationFrame(tick);
    }
    requestAnimationFrame(tick);
  }
  var io = new IntersectionObserver(function(entries){
    entries.forEach(function(en){
      if(en.isIntersecting){
        en.target.classList.add('visible');
        en.target.querySelectorAll('[data-count]').forEach(animateCount);
        if(en.target.hasAttribute && en.target.hasAttribute('data-count')) animateCount(en.target);
        io.unobserve(en.target);
      }
    });
  }, {threshold:0.18});
  document.querySelectorAll('.reveal, [data-count]').forEach(function(el){ io.observe(el); });

  /* Configurator */
  function getChecked(name){
    var el = document.querySelector('input[name="'+name+'"]:checked');
    return el ? {value: el.value, price: parseInt(el.getAttribute('data-price'),10)||0} : {value:'—', price:0};
  }
  function updateConfig(){
    var model = getChecked('model');
    var motor = getChecked('motor');
    var gears = getChecked('gears');
    var box = getChecked('box');
    var extras = [];
    var extrasTotal = 0;
    document.querySelectorAll('input[name="extra"]:checked').forEach(function(el){
      extras.push(el.value);
      extrasTotal += parseInt(el.getAttribute('data-price'),10)||0;
    });
    var total = model.price + motor.price + gears.price + box.price + extrasTotal;
    var deposit = Math.round(total * 0.20);
    var balance = total - deposit;

    var lead = 7;
    if(gears.value.indexOf('Pinion') !== -1) lead += 2;
    if(box.value.indexOf('Painted') !== -1) lead += 1;
    if(box.value.indexOf('Aluminium') !== -1) lead += 2;
    if(motor.value.indexOf('Bosch') !== -1) lead += 1;

    var delivery = new Date(); delivery.setDate(delivery.getDate() + lead*7);
    var dateStr = delivery.toLocaleDateString('en-GB', {day:'numeric', month:'long', year:'numeric'});

    document.getElementById('sumModel').textContent = model.value;
    document.getElementById('sumModel2').textContent = model.value;
    document.getElementById('sumMotor').textContent = motor.value;
    document.getElementById('sumGears').textContent = gears.value;
    document.getElementById('sumBox').textContent = box.value;
    document.getElementById('sumExtras').textContent = extras.length ? extras.join(', ') : 'None';
    document.getElementById('sumLead').textContent = lead + ' weeks';
    document.getElementById('sumDate').textContent = dateStr;
    document.getElementById('totalPrice').textContent = fmt(total);
    document.getElementById('totalEur').textContent = fmtEur(total);
    document.getElementById('depositPrice').textContent = fmt(deposit);
    document.getElementById('balancePrice').textContent = fmt(balance);
  }
  document.querySelectorAll('.config-panel input').forEach(function(el){
    el.addEventListener('change', updateConfig);
  });
  updateConfig();

  /* Tabs */
  var tabBtns = document.querySelectorAll('.tab-btn');
  var panels = document.querySelectorAll('.tab-panel');
  tabBtns.forEach(function(btn){
    btn.addEventListener('click', function(){
      tabBtns.forEach(function(b){ b.classList.remove('active'); });
      panels.forEach(function(p){ p.classList.remove('active'); });
      btn.classList.add('active');
      var panel = document.querySelector('[data-panel="'+btn.getAttribute('data-tab')+'"]');
      if(panel) panel.classList.add('active');
    });
  });

  /* FAQ */
  document.querySelectorAll('.faq').forEach(function(item){
    var btn = item.querySelector('button');
    var panel = item.querySelector('.faq-panel');
    btn.addEventListener('click', function(){
      var isOpen = item.classList.contains('open');
      document.querySelectorAll('.faq.open').forEach(function(o){
        o.classList.remove('open');
        o.querySelector('.faq-panel').style.maxHeight = '0px';
        o.querySelector('button').setAttribute('aria-expanded','false');
      });
      if(!isOpen){
        item.classList.add('open');
        panel.style.maxHeight = panel.scrollHeight + 'px';
        btn.setAttribute('aria-expanded','true');
      }
    });
  });

  /* Booking form */
  var form = document.getElementById('bookingForm');
  form.addEventListener('submit', function(e){
    e.preventDefault();
    var name = document.getElementById('name').value.trim();
    var email = document.getElementById('email').value.trim();
    if(!name || !email || email.indexOf('@') === -1){
      alert('Please add your name and a valid email so we can confirm your visit.');
      return;
    }
    var ref = 'LC-2026-' + Math.floor(1000 + Math.random()*9000);
    document.getElementById('refCode').textContent = ref;
    var interest = document.getElementById('interest').value;
    var dateVal = document.getElementById('date').value;
    var dateText = dateVal ? new Date(dateVal + 'T12:00:00').toLocaleDateString('en-GB',{weekday:'long', day:'numeric', month:'long'}) : 'your preferred date';
    document.getElementById('successText').textContent =
      'Thank you, ' + name.split(' ')[0] + '. We have noted your interest in ' + interest + ' for ' + dateText + '. We will reply to ' + email + ' within one working day to confirm.';
    document.getElementById('formSuccess').classList.add('show');
    document.getElementById('formSuccess').scrollIntoView({behavior:'smooth', block:'center'});
    form.querySelector('button[type="submit"]').textContent = 'Request received ✓';
  });

  /* Footer year */
  document.getElementById('year').textContent = new Date().getFullYear();
})();
</script>
</body>
</html>

Compare with

Muse Ember: other attempts