Run details
- Model
- meta/muse-spark-open
- Route
- OpenRouter API, one user message
- Reasoning
- provider default, 1,193 reasoning tokens
- Limits
- 60 min · 141,176 output tokens
- Date
- 21 Oct 2026
- Time
- 4 min 12 s
- Size
- 63 kB
- Tokens
- 230 in, 20,345 out
- List price
- $0.087 ($1.25 in / $4.25 out per M)
- Paid
- $0.087
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
63 kB 1,024 lines Raw
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Lumen Cycles — Custom cargo bikes built to order in Copenhagen. Handmade steel frames, 10-year warranty, built for Nordic winters.">
<title>Lumen Cycles — Custom Cargo Bikes. Built in Copenhagen.</title>
<style>
:root{
--bg:#F9F7F2;
--paper:#FFFFFF;
--ink:#121412;
--muted:#6B6860;
--line:#E8E2D6;
--line-strong:#D9D0BA;
--accent:#E8B441;
--accent-2:#EB5A2E;
--teal:#1A3937;
--teal-2:#234F4C;
--cream:#F3EFE6;
--radius:16px;
--radius-lg:24px;
--shadow: 0 12px 32px rgba(18,20,18,0.08), 0 2px 8px rgba(18,20,18,0.06);
--shadow-sm: 0 4px 16px rgba(18,20,18,0.07);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji","Segoe UI Emoji";
background:var(--bg);
color:var(--ink);
line-height:1.5;
-webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none}
button{font:inherit}
img,svg{max-width:100%; display:block}
.serif{font-family: Georgia, "Times New Roman", Times, serif; letter-spacing:-0.02em}
.container{width:min(1200px, 92vw); margin-inline:auto}
.eyebrow{
font-size:11px; letter-spacing:0.14em; text-transform:uppercase; font-weight:700; color:var(--muted);
display:inline-flex; align-items:center; gap:8px;
}
.eyebrow::before{content:""; width:28px; height:1px; background:var(--line-strong); display:inline-block}
.btn{
display:inline-flex; align-items:center; justify-content:center; gap:10px;
padding:14px 22px; border-radius:999px; border:1px solid var(--ink);
background:var(--ink); color:white; font-weight:600; font-size:14px;
letter-spacing:0.01em; transition:.2s; cursor:pointer; white-space:nowrap;
}
.btn:hover{transform:translateY(-1px); background:#1e1e1c; box-shadow:var(--shadow-sm)}
.btn:active{transform:translateY(0)}
.btn-light{
background:var(--paper); color:var(--ink); border-color:var(--line-strong);
}
.btn-light:hover{background:white}
.btn-accent{background:var(--accent); color:var(--ink); border-color:var(--accent)}
.btn-accent:hover{background:#f0c25a}
/* Header */
header{
position:sticky; top:0; z-index:50;
background:rgba(249,247,242,0.92); backdrop-filter:saturate(1.2) blur(10px);
border-bottom:1px solid var(--line);
}
.nav{
display:flex; align-items:center; justify-content:space-between;
padding:14px 0; gap:24px;
}
.logo{
display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:0.02em;
}
.logo-mark{
width:32px; height:32px; border-radius:999px; background:var(--ink); color:var(--accent);
display:grid; place-items:center;
}
.logo span{font-size:14px; letter-spacing:0.12em}
.nav-links{display:flex; gap:28px; align-items:center; font-size:14px; font-weight:500; color:#2a2a28}
.nav-links a{opacity:.85} .nav-links a:hover{opacity:1}
.nav-actions{display:flex; gap:12px; align-items:center}
.hamburger{display:none; width:40px; height:40px; border-radius:999px; border:1px solid var(--line-strong); background:white; cursor:pointer}
/* Hero */
.hero{padding:48px 0 24px; display:grid; grid-template-columns: 1.05fr 1fr; gap:40px; align-items:center}
.hero-copy h1{
font-size: clamp(36px, 5.2vw, 62px);
line-height:0.95; margin:16px 0 16px; font-weight:750;
}
.hero-copy h1 em{font-family:Georgia, serif; font-style:italic; font-weight:400; color:var(--teal)}
.hero-copy p.lead{font-size:18px; color:#3a3936; max-width:52ch; margin:0 0 24px}
.hero-meta{display:flex; gap:18px; flex-wrap:wrap; margin-top:18px; font-size:13px; color:var(--muted)}
.hero-meta strong{color:var(--ink)}
.hero-visual{
background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg);
padding:18px; box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.hero-visual-top{display:flex; justify-content:space-between; align-items:center; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; font-weight:700; color:var(--muted); padding:6px 6px 14px}
.badge-dot{width:8px; height:8px; border-radius:999px; background:#2E9E6B; display:inline-block; margin-right:6px; box-shadow:0 0 0 4px rgba(46,158,107,0.15)}
.bike-stage{
background:linear-gradient(180deg, #F3EFE6 0%, #FFFFFF 100%);
border-radius:16px; border:1px solid var(--line); padding:18px; position:relative;
}
.spec-floating{
position:absolute; background:white; border:1px solid var(--line); border-radius:12px; padding:10px 12px;
box-shadow:var(--shadow-sm); font-size:12px; line-height:1.3; min-width:140px;
}
.spec-floating strong{display:block; font-size:13px}
/* Trust bar */
.trustbar{
margin:28px 0 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
background:var(--paper); display:flex; flex-wrap:wrap; gap:18px; justify-content:space-between; align-items:center;
padding:14px 0; font-size:13px; color:var(--muted);
}
.trustbar b{color:var(--ink)}
.press{letter-spacing:0.14em; font-size:11px; font-weight:800; display:flex; gap:22px; align-items:center; flex-wrap:wrap}
.press span{opacity:.6}
/* Section generic */
section{padding:72px 0}
.section-head{display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:32px}
.section-head h2{font-size:clamp(28px, 3.6vw, 42px); line-height:0.95; margin:10px 0 0}
.section-head p{max-width:42ch; color:var(--muted); margin:0}
/* Models */
.models{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.model-card{
background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg);
overflow:hidden; display:flex; flex-direction:column; transition:.25s;
}
.model-card:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--line-strong)}
.model-img{padding:18px; background:var(--cream); border-bottom:1px solid var(--line)}
.model-body{padding:20px 20px 18px; flex:1; display:flex; flex-direction:column}
.model-body h3{margin:0 0 6px; font-size:20px; line-height:1.1}
.model-body .price{font-weight:700; font-size:14px; margin-bottom:10px}
.price small{font-weight:500; color:var(--muted)}
.model-body p{font-size:14px; color:#44433f; margin:0 0 14px; flex:1}
.features{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px}
.chip{font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; padding:6px 10px; border-radius:999px; background:var(--bg); border:1px solid var(--line); color:#3a3936}
.model-cta{display:flex; gap:10px}
.model-cta .btn{flex:1; padding:12px}
/* Craft */
.craft{display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:center}
.craft-visual{
background:var(--teal); color:#E9EDE9; border-radius:var(--radius-lg); padding:22px; position:relative; overflow:hidden;
}
.craft-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:18px}
.craft-stat{background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.14); border-radius:14px; padding:14px}
.craft-stat strong{font-size:22px; display:block; line-height:1}
.craft-copy ul{list-style:none; padding:0; margin:18px 0 0}
.craft-copy li{display:flex; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); font-size:14px}
.craft-copy li:last-child{border:none}
.tick{width:22px; height:22px; border-radius:999px; background:var(--accent); display:grid; place-items:center; flex:none; margin-top:1px}
/* Configurator */
.configurator{
background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow);
overflow:hidden; display:grid; grid-template-columns:1.1fr 0.9fr;
}
.conf-left{padding:26px; border-right:1px solid var(--line)}
.conf-right{background:var(--cream); padding:26px; display:flex; flex-direction:column}
.option-group{margin:20px 0 0}
.option-group h4{font-size:12px; letter-spacing:0.1em; text-transform:uppercase; margin:0 0 10px; color:var(--muted)}
.choices{display:flex; flex-wrap:wrap; gap:10px}
.choice{
padding:12px 14px; border-radius:12px; border:1.5px solid var(--line); background:white; cursor:pointer;
font-size:14px; font-weight:600; min-width:120px; display:flex; justify-content:space-between; gap:10px; align-items:center;
}
.choice.active{border-color:var(--ink); background:var(--ink); color:white}
.choice small{font-weight:500; opacity:.7}
.swatch{width:16px; height:16px; border-radius:999px; border:1px solid rgba(0,0,0,0.12); display:inline-block}
.addons{display:grid; gap:10px}
.addon{
display:flex; justify-content:space-between; align-items:center; gap:12px;
padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:white; cursor:pointer;
}
.addon.active{border-color:var(--ink); background:#fffaf0}
.addon input{accent-color:var(--ink)}
.price-box{
background:white; border:1px solid var(--line); border-radius:16px; padding:18px; margin-top:auto;
}
.price-row{display:flex; justify-content:space-between; font-size:14px; padding:6px 0; border-bottom:1px dashed var(--line)}
.price-row:last-child{border:none}
.price-total{display:flex; justify-content:space-between; align-items:baseline; margin-top:10px}
.price-total strong{font-size:28px}
/* Process */
.process{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.step{background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:18px; position:relative}
.step-num{font-family:Georgia, serif; font-size:28px; color:var(--accent); font-style:italic; line-height:1}
.step h4{margin:8px 0 6px}
.step p{font-size:13px; color:var(--muted); margin:0}
.step::after{
content:"→"; position:absolute; right:-12px; top:50%; transform:translateY(-50%);
width:22px; height:22px; background:var(--accent); border-radius:999px; display:grid; place-items:center; font-size:12px; font-weight:800;
}
.step:last-child::after{display:none}
/* Reviews */
.reviews{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.review{background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:20px}
.stars{color:var(--accent); letter-spacing:2px; font-size:14px}
.review p{font-size:14px; color:#2f2e2c; margin:10px 0 14px}
.reviewer{display:flex; gap:12px; align-items:center; font-size:13px}
.avatar{width:36px; height:36px; border-radius:999px; background:var(--cream); border:1px solid var(--line); display:grid; place-items:center; font-weight:800; color:var(--teal)}
/* FAQ */
.faq{max-width:760px}
.faq-item{border-bottom:1px solid var(--line); padding:0}
.faq-q{
width:100%; text-align:left; background:none; border:none; cursor:pointer;
display:flex; justify-content:space-between; align-items:center; gap:16px;
padding:18px 0; font-weight:700; font-size:16px;
}
.faq-a{font-size:14px; color:var(--muted); padding:0 0 18px; display:none; max-width:65ch}
.faq-item.open .faq-a{display:block}
.faq-icon{width:28px; height:28px; border-radius:999px; border:1px solid var(--line-strong); display:grid; place-items:center; flex:none; transition:.2s}
.faq-item.open .faq-icon{transform:rotate(45deg); background:var(--ink); color:white; border-color:var(--ink)}
/* Footer */
footer{background:var(--teal); color:#E9EDE9; padding:40px 0 24px; margin-top:24px}
.footer-grid{display:grid; grid-template-columns:1.2fr 0.8fr 0.8fr 1fr; gap:28px}
.footer-grid h4{margin:0 0 12px; font-size:13px; letter-spacing:0.12em; text-transform:uppercase; opacity:.9}
.footer-grid a, .footer-grid p{font-size:14px; color:#D7DDDC; opacity:.95}
.footer-grid a:hover{opacity:1; text-decoration:underline}
.newsletter{display:flex; gap:8px; margin-top:10px}
.newsletter input{
flex:1; padding:12px 14px; border-radius:999px; border:1px solid rgba(255,255,255,0.18); background:rgba(255,255,255,0.08); color:white; outline:none;
}
.newsletter input::placeholder{color:rgba(255,255,255,0.6)}
.legal{margin-top:28px; padding-top:18px; border-top:1px solid rgba(255,255,255,0.12); display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:12px; color:rgba(255,255,255,0.6)}
/* Responsive */
@media (max-width: 980px){
.hero{grid-template-columns:1fr; gap:22px}
.models{grid-template-columns:1fr 1fr}
.craft{grid-template-columns:1fr}
.configurator{grid-template-columns:1fr}
.conf-left{border-right:none; border-bottom:1px solid var(--line)}
.process{grid-template-columns:1fr 1fr}
.step::after{display:none}
.reviews{grid-template-columns:1fr 1fr}
.footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 640px){
.nav-links, .nav-actions .btn-light{display:none}
.hamburger{display:grid; place-items:center}
.models{grid-template-columns:1fr}
.reviews{grid-template-columns:1fr}
.process{grid-template-columns:1fr}
.hero-copy h1{font-size:36px}
.footer-grid{grid-template-columns:1fr}
}
/* Mobile menu */
.mobile-drawer{
display:none; position:fixed; inset:60px 0 0 0; background:var(--bg); z-index:40; padding:18px; border-top:1px solid var(--line)
}
.mobile-drawer.open{display:block}
.mobile-drawer a{display:block; padding:14px 0; border-bottom:1px solid var(--line); font-weight:600}
/* subtle reveal */
.reveal{opacity:0; transform:translateY(8px); transition:.6s}
.reveal.visible{opacity:1; transform:none}
</style>
</head>
<body>
<header>
<div class="container nav">
<a class="logo" href="#top" aria-label="Lumen Cycles home">
<span class="logo-mark" aria-hidden="true">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7">
<circle cx="12" cy="12" r="7.5"></circle>
<path d="M12 4.5v15 M4.5 12h15 M7 7l10 10 M17 7L7 17"></path>
<circle cx="12" cy="12" r="2"></circle>
</svg>
</span>
<span>LUMEN CYCLES</span>
</a>
<nav class="nav-links" aria-label="Primary">
<a href="#models">Bikes</a>
<a href="#craft">Workshop</a>
<a href="#process">Process</a>
<a href="#reviews">Owners</a>
<a href="#faq">FAQ</a>
</nav>
<div class="nav-actions">
<a href="#configurator" class="btn btn-light" style="padding:10px 16px">Configure & Price</a>
<a href="#visit" class="btn" style="padding:10px 16px">Book Test Ride</a>
<button class="hamburger" id="hamburger" aria-label="Open menu" aria-expanded="false">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M4 7h16M4 12h16M4 17h16"/></svg>
</button>
</div>
</div>
<div class="mobile-drawer" id="drawer">
<a href="#models">Bikes — from €4,200</a>
<a href="#craft">Workshop on Refshaleøen</a>
<a href="#configurator">Configure your build</a>
<a href="#visit">Book Test Ride — Free 45 min</a>
<p style="color:var(--muted); font-size:13px; margin-top:14px">Nordre Refshalevej 45, 1436 Copenhagen K · Open Tue–Sat 10–17</p>
</div>
</header>
<main id="top">
<!-- HERO -->
<div class="container hero">
<div class="hero-copy reveal visible">
<div class="eyebrow">Copenhagen — Since 2014 · Built to order in 6–8 weeks</div>
<h1 class="serif">Cargo bikes <em>built for</em> real life. <span style="font-weight:700; font-family: -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing:-0.03em">Not just the brochure.</span></h1>
<p class="lead">We are a small workshop on Refshaleøen. We weld, paint and assemble every Lumen by hand for your family, your route, your winter. No mass production. No compromises.</p>
<div style="display:flex; gap:12px; flex-wrap:wrap; margin-top:10px">
<a href="#configurator" class="btn btn-accent">Configure yours — from €4,200 <span aria-hidden="true">→</span></a>
<a href="#models" class="btn btn-light">Explore models</a>
</div>
<div class="hero-meta">
<span><strong>10-year</strong> frame warranty</span>
<span>•</span>
<span><strong>2,400+</strong> bikes in Copenhagen & beyond</span>
<span>•</span>
<span><strong>4.9/5</strong> from 312 verified owners</span>
</div>
<div style="display:flex; gap:10px; margin-top:18px; align-items:center; flex-wrap:wrap">
<div style="display:flex; align-items:center; gap:8px; background:white; border:1px solid var(--line); border-radius:999px; padding:8px 12px; font-size:12px; font-weight:600">
<span style="width:22px; height:22px; border-radius:999px; background:var(--teal); display:grid; place-items:center; color:white">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 13l4 4L19 7"/></svg>
</span>
Certified EN 17860 & ISO 4210
</div>
<div style="font-size:12px; color:var(--muted);">Visit our workshop — test ride daily, no appointment needed Tue–Thu</div>
</div>
</div>
<div class="hero-visual reveal visible">
<div class="hero-visual-top">
<span><span class="badge-dot"></span> Available to order now</span>
<span style="display:flex; gap:8px; align-items:center">
<span style="background:var(--ink); color:white; padding:4px 8px; border-radius:999px; font-size:11px">Shimano Cargo • Gates Belt</span>
<span style="background:var(--accent); color:var(--ink); padding:4px 8px; border-radius:999px; font-size:11px; font-weight:800">From €4,200</span>
</span>
</div>
<div class="bike-stage" aria-hidden="true">
<!-- Floating specs -->
<div class="spec-floating" style="left:10px; top:12px;">
<strong>80 km</strong> Bosch Cargo Line, 500 Wh + opt. 750 Wh extender
</div>
<div class="spec-floating" style="right:10px; bottom:22px;">
<strong>200 kg</strong> max load · Tested to 300 kg
</div>
<!-- Inline SVG Cargo Bike Illustration -->
<svg viewBox="0 0 560 340" width="100%" height="auto" role="img" aria-label="Lumen cargo bike illustration">
<rect x="0" y="0" width="560" height="340" rx="16" fill="#FFFFFF" stroke="#E8E2D6"/>
<!-- ground -->
<rect x="24" y="292" width="512" height="2" rx="1" fill="#E8E2D6"/>
<!-- cargo box -->
<g>
<path d="M78 168 L78 112 L248 112 L248 168 Z" fill="#F3EFE6" stroke="#121412" stroke-width="3"/>
<path d="M78 132 L248 132" stroke="#121412" stroke-width="1.4" stroke-dasharray="6 6" opacity=".3"/>
<path d="M92 124 L92 154 M118 124 L118 154 M144 124 L144 154 M170 124 L170 154 M196 124 L196 154 M222 124 L222 154" stroke="#121412" stroke-width="1.1" opacity=".35"/>
<rect x="108" y="142" width="64" height="10" rx="5" fill="#E8B441" stroke="#121412" stroke-width="1.4"/>
<text x="140" y="150" text-anchor="middle" font-size="7" font-weight="800" font-family="sans-serif" letter-spacing="0.06em">LUMEN</text>
</g>
<!-- frame -->
<g stroke="#121412" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path d="M248 168 L322 168 L368 108 L318 108 Z" />
<path d="M322 168 L368 108" />
<path d="M368 108 L392 108 L410 138 L426 168" />
<path d="M410 138 L380 168" />
<!-- handlebar -->
<path d="M392 108 L388 88 L405 82" stroke-width="4"/>
<circle cx="403" cy="80" r="6" fill="#121412" stroke="none"/>
<!-- seat -->
<path d="M318 108 L302 86" />
<path d="M284 84 L320 84" stroke-width="6" stroke-linecap="round"/>
</g>
<!-- wheels -->
<g>
<circle cx="120" cy="238" r="62" fill="none" stroke="#121412" stroke-width="6"/>
<circle cx="120" cy="238" r="52" fill="none" stroke="#E8E2D6" stroke-width="1.2"/>
<circle cx="120" cy="238" r="6" fill="#121412"/>
<g stroke="#121412" stroke-width="1.2" opacity=".9">
<line x1="120" y1="176" x2="120" y2="300"/><line x1="58" y1="238" x2="182" y2="238"/>
<line x1="76" y1="194" x2="164" y2="282"/><line x1="164" y1="194" x2="76" y2="282"/>
</g>
<!-- rear wheel -->
<circle cx="430" cy="238" r="62" fill="none" stroke="#121412" stroke-width="6"/>
<circle cx="430" cy="238" r="52" fill="none" stroke="#E8E2D6" stroke-width="1.2"/>
<circle cx="430" cy="238" r="6" fill="#121412"/>
<g stroke="#121412" stroke-width="1.2" opacity=".9">
<line x1="430" y1="176" x2="430" y2="300"/><line x1="368" y1="238" x2="492" y2="238"/>
<line x1="386" y1="194" x2="474" y2="282"/><line x1="474" y1="194" x2="386" y2="282"/>
</g>
</g>
<!-- fenders -->
<path d="M58 238 A62 62 0 0 1 182 238" fill="none" stroke="#2B4C4A" stroke-width="3"/>
<path d="M368 238 A62 62 0 0 1 492 238" fill="none" stroke="#2B4C4A" stroke-width="3"/>
<!-- motor -->
<rect x="398" y="202" width="38" height="22" rx="6" fill="#1A3937" stroke="#121412" stroke-width="1.5"/>
<text x="417" y="217" text-anchor="middle" fill="white" font-size="6" font-weight="800" letter-spacing="0.08em">BOSCH</text>
</svg>
<div style="display:flex; justify-content:space-between; align-items:center; margin-top:12px; font-size:12px; color:var(--muted);">
<span style="display:flex; gap:8px; align-items:center"><span style="width:8px; height:8px; background:var(--accent); border-radius:999px; display:inline-block"></span> Hand-welded Reynolds 520 steel · Powder-coated in-house</span>
<span style="font-weight:700; color:var(--ink)">Delivery 6–8 weeks</span>
</div>
</div>
<div style="display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-top:14px">
<div style="background:var(--cream); border:1px solid var(--line); border-radius:12px; padding:12px; text-align:center">
<div style="font-size:11px; letter-spacing:0.08em; text-transform:uppercase; font-weight:700; color:var(--muted)">Payload</div><strong style="font-size:16px">200 kg</strong>
</div>
<div style="background:var(--cream); border:1px solid var(--line); border-radius:12px; padding:12px; text-align:center">
<div style="font-size:11px; letter-spacing:0.08em; text-transform:uppercase; font-weight:700; color:var(--muted)">Range</div><strong style="font-size:16px">80–140 km</strong>
</div>
<div style="background:var(--cream); border:1px solid var(--line); border-radius:12px; padding:12px; text-align:center">
<div style="font-size:11px; letter-spacing:0.08em; text-transform:uppercase; font-weight:700; color:var(--muted)">Warranty</div><strong style="font-size:16px">10 years</strong>
</div>
</div>
</div>
</div>
<div class="container trustbar">
<div><b>Trusted by families who ride every day —</b> not just on sunny Sundays</div>
<div class="press" aria-label="Press mentions">
<span>POLITIKEN ★★★★★</span><span>WALLPAPER*</span><span>CYCLING DENMARK</span><span>CPH BIKE LIFE</span>
</div>
</div>
<!-- MODELS -->
<section id="models">
<div class="container">
<div class="section-head">
<div>
<div class="eyebrow">Three platforms, infinite builds</div>
<h2 class="serif">Choose your base.<br>We build it for you.</h2>
</div>
<p>All Lumen frames are the same proven steel chassis — geometry and kit change to match how you actually live. Every bike is wired for lights, double-stand, and child seats from day one.</p>
</div>
<div class="models">
<!-- Card 1 -->
<article class="model-card">
<div class="model-img">
<svg viewBox="0 0 360 200" width="100%" role="img" aria-label="Lumen Carry">
<rect width="360" height="200" rx="14" fill="white" stroke="#E8E2D6"/>
<g stroke="#121412" stroke-width="3.5" fill="none" stroke-linecap="round">
<path d="M60 110 L60 80 L160 80 L160 110 L86 110 L86 125 L130 125 L145 110 L205 110 L235 75 L210 75 L190 95 L130 105"/>
<path d="M190 95 L210 75 L220 75 L230 92 L235 110"/>
</g>
<circle cx="82" cy="145" r="34" fill="none" stroke="#121412" stroke-width="4.5"/><circle cx="235" cy="145" r="34" fill="none" stroke="#121412" stroke-width="4.5"/>
<rect x="62" y="86" width="96" height="22" rx="4" fill="#F3EFE6" stroke="#121412" stroke-width="1.5"/>
<text x="55" y="18" font-size="11" font-weight="800" letter-spacing="0.1em">CARRY — CITY COMPACT</text>
</svg>
</div>
<div class="model-body">
<h3 class="serif">Lumen Carry</h3>
<div class="price">From €4,200 <small>· Belt drive, manual</small></div>
<p>Nimble length, huge capacity. Fits in a Copenhagen courtyard, carries two kids + groceries. Our most popular for daily school runs.</p>
<div class="features">
<span class="chip">2 kids</span><span class="chip">140 L box</span><span class="chip">7.2 kg box payload</span>
</div>
<div class="model-cta">
<button class="btn btn-light" onclick="selectModel('carry')">Details</button>
<button class="btn" onclick="selectModel('carry', true)">Configure</button>
</div>
</div>
</article>
<!-- Card 2 -->
<article class="model-card">
<div class="model-img" style="background:#EAF0ED">
<svg viewBox="0 0 360 200" width="100%" role="img" aria-label="Lumen Haul">
<rect width="360" height="200" rx="14" fill="white" stroke="#E8E2D6"/>
<g stroke="#121412" stroke-width="3.5" fill="none" stroke-linecap="round">
<path d="M42 112 L42 72 L176 72 L176 112 L86 112 L88 125 L132 125 L148 112 L205 112 L238 78 L212 78 L192 98 L132 107"/>
<path d="M192 98 L212 78 L222 78 L233 95 L238 112"/>
</g>
<circle cx="84" cy="145" r="34" fill="none" stroke="#121412" stroke-width="4.5"/><circle cx="240" cy="145" r="34" fill="none" stroke="#121412" stroke-width="4.5"/>
<rect x="44" y="78" width="130" height="30" rx="4" fill="#E8B441" stroke="#121412" stroke-width="1.5"/>
<text x="55" y="18" font-size="11" font-weight="800" letter-spacing="0.1em">HAUL — HEAVY DUTY</text>
</svg>
</div>
<div class="model-body">
<h3 class="serif">Lumen Haul</h3>
<div class="price">From €4,850 <small>· Bosch Cargo Line 85 Nm</small></div>
<p>Extended rack, double battery ready. Built for tradespeople, market stalls, and families who never check the weight limit.</p>
<div class="features">
<span class="chip">250 kg total</span><span class="chip">200 L box</span><span class="chip">Gates CDX</span>
</div>
<div class="model-cta">
<button class="btn btn-light" onclick="selectModel('haul')">Details</button>
<button class="btn" onclick="selectModel('haul', true)">Configure</button>
</div>
</div>
</article>
<!-- Card 3 -->
<article class="model-card">
<div class="model-img" style="background:#FFF6D9">
<svg viewBox="0 0 360 200" width="100%" role="img" aria-label="Lumen Duo">
<rect width="360" height="200" rx="14" fill="white" stroke="#E8E2D6"/>
<g stroke="#121412" stroke-width="3.5" fill="none" stroke-linecap="round">
<path d="M60 110 L60 80 L162 80 L162 110 L82 110 L86 125 L132 125 L147 110 L206 110 L236 75 L211 75 L191 95 L132 105"/>
<path d="M191 95 L211 75 L221 75 L231 92 L236 110"/>
</g>
<circle cx="82" cy="145" r="34" fill="none" stroke="#121412" stroke-width="4.5"/><circle cx="236" cy="145" r="34" fill="none" stroke="#121412" stroke-width="4.5"/>
<path d="M76 88 L76 104 M96 88 L96 104 M116 88 L116 104 M136 88 L136 104" stroke="#121412" stroke-width="1.2"/>
<rect x="70" y="96" width="28" height="10" rx="5" fill="#1A3937"/><rect x="110" y="96" width="28" height="10" rx="5" fill="#1A3937"/>
<text x="55" y="18" font-size="11" font-weight="800" letter-spacing="0.1em">DUO — KIDS & COMFORT</text>
</svg>
</div>
<div class="model-body">
<h3 class="serif">Lumen Duo</h3>
<div class="price">From €5,400 <small>· Dual child seats + canopy</small></div>
<p>Padded bench, 5-point harnesses, rain canopy and footwell. The winter-proof school bus that still fits the bike lane.</p>
<div class="features">
<span class="chip">2× 5-pt harness</span><span class="chip">Rain canopy incl.</span><span class="chip">Heated grips opt.</span>
</div>
<div class="model-cta">
<button class="btn btn-light" onclick="selectModel('duo')">Details</button>
<button class="btn" onclick="selectModel('duo', true)">Configure</button>
</div>
</div>
</article>
</div>
<div style="display:flex; gap:12px; justify-content:center; margin-top:18px; flex-wrap:wrap; font-size:13px; color:var(--muted)">
<span style="background:white; border:1px solid var(--line); padding:8px 12px; border-radius:999px">All builds include: Busch & Müller lights, Hebie double stand, ABUS frame lock, 10-yr warranty</span>
<span style="background:var(--ink); color:white; padding:8px 12px; border-radius:999px">Financing from €89/mo — 0% APR for 24 months with Santander</span>
</div>
</div>
</section>
<!-- CRAFT -->
<section id="craft" style="padding-top:0">
<div class="container craft">
<div class="craft-visual">
<div class="eyebrow" style="color:#C9D6D4">Workshop · Refshaleøen, Copenhagen</div>
<h3 class="serif" style="font-size:32px; line-height:1; margin:12px 0 10px">We build bikes the slow way, so they last.</h3>
<p style="color:#D7DDDC; font-size:14px; max-width:52ch; margin:0">No assembly line. One framebuilder per bike, from tube to test ride. We keep every jig we’ve ever made — your bike can be repaired forever.</p>
<!-- Workshop illustration -->
<svg viewBox="0 0 560 220" width="100%" style="margin-top:18px; border-radius:14px; border:1px solid rgba(255,255,255,0.14); background:#14302E; display:block" role="img" aria-label="Workshop illustration">
<g stroke="rgba(255,255,255,0.9)" stroke-width="1.4" fill="none">
<rect x="18" y="32" width="524" height="120" rx="10" fill="rgba(255,255,255,0.04)"/>
<line x1="18" y1="88" x2="542" y2="88" opacity=".2"/><line x1="18" y1="120" x2="542" y2="120" opacity=".18"/>
<!-- bikes hanging -->
<circle cx="96" cy="86" r="22" stroke="#E8B441" stroke-width="2"/><circle cx="96" cy="86" r="3" fill="#E8B441" stroke="none"/>
<line x1="96" y1="64" x2="96" y2="38" stroke="rgba(255,255,255,0.5)"/>
<circle cx="220" cy="86" r="22" stroke="white" stroke-width="1.6" opacity=".9"/><circle cx="340" cy="86" r="22" stroke="white" stroke-width="1.6" opacity=".6"/>
<!-- workbench -->
<rect x="28" y="128" width="220" height="14" rx="4" fill="white" opacity=".95"/>
<rect x="34" y="112" width="48" height="16" rx="2" fill="#E8B441" stroke="white"/>
<rect x="90" y="116" width="34" height="8" rx="2" fill="white"/>
<!-- person -->
<circle cx="430" cy="110" r="10" fill="white" opacity=".95"/><path d="M418 128 L442 128 L436 152 L424 152 Z" fill="white"/>
<text x="28" y="172" fill="white" font-size="10" letter-spacing="0.08em" opacity=".8">Reynolds 520 · TIG welded · Powder coated on site · 37 point QC</text>
</g>
</svg>
<div class="craft-grid">
<div class="craft-stat"><strong>19</strong> people in the workshop <span style="font-size:12px; opacity:.8">6 framebuilders, 2 painters, 9 assembly</span></div>
<div class="craft-stat"><strong>6–8 weeks</strong> from order to ride <span style="font-size:12px; opacity:.8">You get weekly photos of your build</span></div>
<div class="craft-stat"><strong>10-year</strong> warranty on frame & fork <span style="font-size:12px; opacity:.8">Transferable to next owner</span></div>
<div class="craft-stat"><strong>100%</strong> repairable <span style="font-size:12px; opacity:.8">We stock every spare since 2014</span></div>
</div>
</div>
<div class="craft-copy">
<div class="eyebrow">Why steel? Why us?</div>
<h3 class="serif" style="font-size:30px; margin:10px 0 8px; line-height:1">A bike you’ll hand down, not throw away.</h3>
<p style="color:var(--muted); font-size:15px; margin:0">Copenhagen winters are brutal on aluminium and carbon. Steel can be bent back, re-welded, re-painted. Ours is double-butted, rust-proofed inside with wax, and built for salt, snow and kerbs.</p>
<ul>
<li><span class="tick"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 13l4 4L19 7"/></svg></span> <span><b>Reynolds 520</b> — hand-mitered and TIG welded in one jig, one builder, one signature under the bottom bracket.</span></li>
<li><span class="tick"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 13l4 4L19 7"/></svg></span> <span><b>Rust-proofed for the North Sea</b> — ED coated, powder coated, and wax-injected. Tested with 1,000h salt spray.</span></li>
<li><span class="tick"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 13l4 4L19 7"/></svg></span> <span><b>Service where you are</b> — mobile mechanics in Copenhagen, partner shops in Aarhus, Berlin & Hamburg, or visit us.</span></li>
</ul>
<div style="display:flex; gap:10px; margin-top:18px; flex-wrap:wrap">
<a href="#visit" class="btn">Meet the builders — open workshop Saturdays</a>
<a href="#faq" class="btn btn-light">How custom works</a>
</div>
</div>
</div>
</section>
<!-- CONFIGURATOR -->
<section id="configurator" style="padding-top:24px">
<div class="container">
<div class="eyebrow">Configurator — live price</div>
<div style="display:flex; justify-content:space-between; gap:16px; align-items:end; flex-wrap:wrap; margin:8px 0 18px">
<h2 class="serif" style="font-size:36px; margin:0; line-height:0.95">Build your Lumen. See the price.</h2>
<div style="font-size:13px; color:var(--muted); background:white; border:1px solid var(--line); padding:8px 12px; border-radius:999px">No hidden fees · VAT included · Delivery €149 in DK, €290 EU</div>
</div>
<div class="configurator">
<div class="conf-left">
<div class="option-group">
<h4>1 — Choose model</h4>
<div class="choices" id="modelChoices">
<button class="choice active" data-model="carry" aria-pressed="true"><span>Lumen Carry</span> <small>€4,200</small></button>
<button class="choice" data-model="haul"><span>Lumen Haul</span> <small>€4,850</small></button>
<button class="choice" data-model="duo"><span>Lumen Duo</span> <small>€5,400</small></button>
</div>
</div>
<div class="option-group">
<h4>2 — Frame colour — powder coated in-house</h4>
<div class="choices" id="colorChoices">
<button class="choice active" data-color="paper" data-price="0"><span><span class="swatch" style="background:#F9F7F2; border-color:#D9D0BA"></span> Paper White</span> <small>Incl.</small></button>
<button class="choice" data-color="forest" data-price="0"><span><span class="swatch" style="background:#1A3937"></span> Forest Green</span> <small>Incl.</small></button>
<button class="choice" data-color="amber" data-price="150"><span><span class="swatch" style="background:#E8B441"></span> Copenhagen Amber</span> <small>+€150</small></button>
<button class="choice" data-color="slate" data-price="150"><span><span class="swatch" style="background:#5A6360"></span> Harbour Slate</span> <small>+€150</small></button>
</div>
</div>
<div class="option-group">
<h4>3 — Add what you need (tick what applies)</h4>
<div class="addons">
<label class="addon active" data-addon="motor" data-price="0">
<span style="display:flex; gap:10px; align-items:center"><input type="checkbox" checked disabled> Bosch Cargo Line motor + 500Wh <em style="font-size:11px; background:var(--teal); color:white; padding:2px 6px; border-radius:999px; font-style:normal">Included on Haul/Duo</em></span>
<strong>Incl.</strong>
</label>
<label class="addon" data-addon="extender" data-price="650">
<span style="display:flex; gap:10px; align-items:center"><input type="checkbox"> Range extender 500Wh ( +80 km )</span>
<strong>+€650</strong>
</label>
<label class="addon" data-addon="canopy" data-price="450">
<span style="display:flex; gap:10px; align-items:center"><input type="checkbox"> Rain canopy + windscreen</span>
<strong>+€450</strong>
</label>
<label class="addon" data-addon="seats" data-price="290">
<span style="display:flex; gap:10px; align-items:center"><input type="checkbox"> Second child seat (5-pt harness)</span>
<strong>+€290</strong>
</label>
<label class="addon" data-addon="boxcover" data-price="180">
<span style="display:flex; gap:10px; align-items:center"><input type="checkbox"> Lockable box cover</span>
<strong>+€180</strong>
</label>
</div>
</div>
<p style="font-size:12px; color:var(--muted); margin-top:12px">Price updates live. You’ll confirm details with a builder before we weld. No obligation.</p>
</div>
<div class="conf-right">
<div style="display:flex; justify-content:space-between; align-items:center">
<h3 class="serif" style="margin:0; font-size:22px" id="summaryName">Lumen Carry — Paper White</h3>
<span style="font-size:11px; letter-spacing:0.08em; text-transform:uppercase; font-weight:800; background:var(--ink); color:white; padding:6px 10px; border-radius:999px">Build #C-4821</span>
</div>
<!-- Preview SVG that changes colour -->
<div style="background:white; border:1px solid var(--line); border-radius:16px; padding:14px; margin-top:14px">
<svg id="previewBike" viewBox="0 0 520 220" width="100%" role="img" aria-label="Preview of your build">
<rect x="8" y="8" width="504" height="204" rx="14" fill="#FFFFFF" stroke="#E8E2D6"/>
<!-- cargo box -->
<path id="boxColor" d="M54 120 L54 74 L212 74 L212 120 Z" fill="#F9F7F2" stroke="#121412" stroke-width="2.6"/>
<path d="M54 96 L212 96" stroke="#121412" stroke-width="1.2" opacity=".2" stroke-dasharray="5 5"/>
<!-- frame -->
<g id="frameColor" stroke="#121412" stroke-width="3.4" fill="none" stroke-linecap="round">
<path d="M212 120 L282 120 L318 78 L278 78 Z"/>
<path d="M282 120 L318 78"/>
<path d="M318 78 L342 78 L360 100 L376 120"/>
<path d="M360 100 L332 120"/>
<path d="M342 78 L338 62 L354 57"/>
</g>
<circle cx="96" cy="158" r="40" fill="none" stroke="#121412" stroke-width="5"/><circle cx="376" cy="158" r="40" fill="none" stroke="#121412" stroke-width="5"/>
<circle cx="96" cy="158" r="5" fill="#121412"/><circle cx="376" cy="158" r="5" fill="#121412"/>
<rect x="348" y="126" width="32" height="16" rx="6" fill="#1A3937"/>
<text id="previewText" x="260" y="190" text-anchor="middle" font-size="11" font-weight="800" letter-spacing="0.08em">LUMEN CARRY — PAPER WHITE</text>
</svg>
<div style="display:flex; gap:8px; margin-top:10px; flex-wrap:wrap">
<span style="font-size:11px; background:var(--cream); border:1px solid var(--line); padding:6px 8px; border-radius:999px">Reynolds 520 steel</span>
<span style="font-size:11px; background:var(--cream); border:1px solid var(--line); padding:6px 8px; border-radius:999px">Gates belt · Enviolo / Deore</span>
<span style="font-size:11px; background:var(--cream); border:1px solid var(--line); padding:6px 8px; border-radius:999px">Weight ~42 kg · 200 kg payload</span>
</div>
</div>
<div class="price-box">
<div style="font-size:12px; letter-spacing:0.08em; text-transform:uppercase; font-weight:800; color:var(--muted)">Your build</div>
<div class="price-row"><span>Base price</span> <span id="rowBase">€4,200</span></div>
<div class="price-row"><span>Colour</span> <span id="rowColor">Included</span></div>
<div class="price-row"><span>Add-ons</span> <span id="rowAddons">€0</span></div>
<div class="price-row"><span>Delivery (DK)</span> <span>€149</span></div>
<div class="price-total"><span style="font-size:13px; font-weight:600">Total incl. VAT</span> <strong id="totalPrice">€4,349</strong></div>
<div style="font-size:11px; color:var(--muted); margin-top:4px; text-align:right">Or €89/mo for 48 months · 0% APR 24 months available</div>
<button class="btn" style="width:100%; margin-top:14px" onclick="reserveBuild()">Reserve this build — €200 deposit</button>
<div style="font-size:12px; text-align:center; margin-top:8px; color:var(--muted)">Fully refundable for 14 days · Chat with a builder before welding</div>
<div id="reserveMsg" style="display:none; margin-top:10px; background:#EAF6EE; border:1px solid #B9E0C3; color:#0F3D1F; padding:10px 12px; border-radius:10px; font-size:13px"></div>
</div>
</div>
</div>
</div>
</section>
<!-- PROCESS -->
<section id="process" style="padding-top:26px">
<div class="container">
<div class="eyebrow">How it works</div>
<h2 class="serif" style="font-size:34px; margin:10px 0 18px; line-height:1">From first chat to first ride.</h2>
<div class="process">
<div class="step"><div class="step-num">01</div><h4>Visit or video call</h4><p>45 min with a builder. We measure you, talk routes, kids, hills, storage. No sales script.</p></div>
<div class="step"><div class="step-num">02</div><h4>We draw & confirm</h4><p>You get a spec sheet + drawing. Change anything until you sign. Deposit €200.</p></div>
<div class="step"><div class="step-num">03</div><h4>We build (6–8 weeks)</h4><p>Weekly photos from the jig, paint booth and assembly. Your name on the build board.</p></div>
<div class="step"><div class="step-num">04</div><h4>Ride & refine</h4><p>Collect on Refshaleøen or delivered. 30-day tune-up included, then yearly service.</p></div>
</div>
</div>
</section>
<!-- REVIEWS -->
<section id="reviews" style="padding-top:18px">
<div class="container">
<div class="section-head">
<div>
<div class="eyebrow">Owners — verified purchases</div>
<h2 class="serif">They bought a bike.<br>They got back hours each week.</h2>
</div>
<div style="background:white; border:1px solid var(--line); padding:12px 16px; border-radius:14px; display:flex; gap:12px; align-items:center">
<div style="font-weight:800; font-size:22px">4.9/5</div><div style="font-size:13px; color:var(--muted)">312 reviews · <span style="text-decoration:underline">Trustpilot</span> · 97% would recommend</div>
</div>
</div>
<div class="reviews">
<div class="review">
<div class="stars">★★★★★</div>
<p>“We sold our second car. Two kids, groceries, rain — it just works. Lumen serviced it at our door after 1,800 km. Feels like family.”</p>
<div class="reviewer"><div class="avatar">S</div><div><strong>Sofie & Jonas</strong><br><span style="color:var(--muted)">Nørrebro · Carry, 2022 · 4,200 km</span></div></div>
</div>
<div class="review">
<div class="stars">★★★★★</div>
<p>“I haul flower buckets for my shop. 80 kg daily, cobblestones, no drama. The frame is still perfect after two winters.”</p>
<div class="reviewer"><div class="avatar">M</div><div><strong>Mikkel A.</strong><br><span style="color:var(--muted)">Vesterbro · Haul, 2021 · 11,000 km</span></div></div>
</div>
<div class="review">
<div class="stars">★★★★★</div>
<p>“The canopy is the real win. Kids stay dry, I stay sane. We ride 14 km every day to Østerbro. Battery still at 94% health.”</p>
<div class="reviewer"><div class="avatar">A</div><div><strong>Anna K.</strong><br><span style="color:var(--muted)">Amager · Duo, 2023 · 2,900 km</span></div></div>
</div>
</div>
</div>
</section>
<!-- SPECS / FAQ -->
<section id="faq">
<div class="container" style="display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:start">
<div>
<div class="eyebrow">Specs that matter</div>
<h3 class="serif" style="font-size:28px; margin:10px 0 12px">Built for Nordic winters. Not showroom floors.</h3>
<div style="background:var(--paper); border:1px solid var(--line); border-radius:16px; overflow:hidden">
<div style="display:grid; grid-template-columns:1fr 1fr; font-size:13px">
<div style="padding:12px 16px; border-bottom:1px solid var(--line); border-right:1px solid var(--line)"><b>Frame</b><br><span style="color:var(--muted)">Reynolds 520, ED + powder coat, wax injected</span></div>
<div style="padding:12px 16px; border-bottom:1px solid var(--line)"><b>Motor / Battery</b><br><span style="color:var(--muted)">Bosch Cargo Line 85 Nm · 500 Wh (opt. 1,000 Wh)</span></div>
<div style="padding:12px 16px; border-bottom:1px solid var(--line); border-right:1px solid var(--line)"><b>Drivetrain</b><br><span style="color:var(--muted)">Gates CDX belt · Enviolo HD or Shimano Deore 10s</span></div>
<div style="padding:12px 16px; border-bottom:1px solid var(--line)"><b>Brakes</b><br><span style="color:var(--muted)">Magura MT5e 4-piston, 180 mm</span></div>
<div style="padding:12px 16px; border-right:1px solid var(--line)"><b>Lights</b><br><span style="color:var(--muted)">Busch & Müller IQ-X / Toplight, dynamo-ready</span></div>
<div style="padding:12px 16px"><b>Load</b><br><span style="color:var(--muted)">200 kg total · 100 kg box · Tested to 300 kg</span></div>
</div>
</div>
<div style="display:flex; gap:10px; margin-top:12px; flex-wrap:wrap">
<a href="#configurator" class="btn btn-accent">Configure your spec</a>
<a href="#" class="btn btn-light" onclick="event.preventDefault(); alert('Full geometry chart: Stack 612mm, Reach 410mm (M), Wheelbase 1920–2050mm. S/M/L frames. We fit you personally.')">Geometry chart (PDF)</a>
</div>
</div>
<div class="faq">
<div class="eyebrow">Questions — straight answers</div>
<h3 class="serif" style="font-size:28px; margin:10px 0 12px">What people ask before they order.</h3>
<div class="faq-item open">
<button class="faq-q" aria-expanded="true">What does “custom to order” mean? <span class="faq-icon">+</span></button>
<div class="faq-a" style="display:block">We don’t hold stock. Every frame is cut and welded after you confirm your spec. You choose model, colour, battery, child seats and accessories. We confirm geometry for your height. Lead time is 6–8 weeks; you get photos each week.</div>
</div>
<div class="faq-item">
<button class="faq-q" aria-expanded="false">Can I try before I commit €4,000? <span class="faq-icon">+</span></button>
<div class="faq-a">Yes. Book a 45-minute test ride on Refshaleøen — we load the box with sandbags and kids’ dummies so you feel real weight. Or join our Saturday open workshop (10–14). No pressure, no deposit to try.</div>
</div>
<div class="faq-item">
<button class="faq-q" aria-expanded="false">What about service and theft? <span class="faq-icon">+</span></button>
<div class="faq-a">Every Lumen includes a 30-day tune-up, yearly service for 3 years at cost, and an ABUS frame lock + GPS prep. We partner with Nextbike mechanics — mobile service in Greater Copenhagen, or ship us the bike. Frame warranty is 10 years, transferable.</div>
</div>
<div class="faq-item">
<button class="faq-q" aria-expanded="false">Financing & delivery <span class="faq-icon">+</span></button>
<div class="faq-a">Denmark €149 flat, EU €290. We can deliver assembled by van or you collect and we fit you on site. Financing from €89/month via Santander Consumer Bank — we’ll run the numbers with you, no hidden fees.</div>
</div>
</div>
</div>
</section>
<!-- VISIT / FOOTER CTA -->
<section id="visit" style="padding-top:0">
<div class="container" style="background:var(--teal); color:#E9EDE9; border-radius:var(--radius-lg); padding:24px; display:grid; grid-template-columns:1.1fr 0.9fr; gap:22px; align-items:center">
<div>
<div class="eyebrow" style="color:#A8C0BE">Visit us on Refshaleøen</div>
<h3 class="serif" style="font-size:30px; margin:10px 0 8px; line-height:1">Come see how it’s made. Bring the kids.</h3>
<p style="color:#D7DDDC; margin:0 0 12px; font-size:14px; max-width:48ch">Nordre Refshalevej 45, 1436 Copenhagen K — 10 min by bike from Nyhavn. Test rides Tue–Sat, open workshop Saturdays 10–14. Coffee on us.</p>
<div style="display:flex; gap:10px; flex-wrap:wrap">
<a href="#" class="btn btn-accent" onclick="event.preventDefault(); document.getElementById('bookMsg').style.display='block'">Book test ride</a>
<a href="#" class="btn" style="background:white; color:var(--teal); border-color:white" onclick="event.preventDefault(); alert('Call us: +45 32 19 07 14 — Tue–Sat 10–17 CET')">Call +45 32 19 07 14</a>
</div>
<div id="bookMsg" style="display:none; margin-top:12px; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2); padding:10px 12px; border-radius:10px; font-size:13px">Tak! Pick a time on the next page. We held your build in the configurator — no need to start over.</div>
</div>
<div style="background:#14302E; border:1px solid rgba(255,255,255,0.14); border-radius:16px; padding:16px">
<div style="display:flex; justify-content:space-between; align-items:center; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; font-weight:800; opacity:.8"><span>Next available slots</span><span style="background:var(--accent); color:var(--ink); padding:4px 8px; border-radius:999px">Free 45 min</span></div>
<div style="display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; font-size:13px">
<div style="background:white; color:var(--ink); padding:10px; border-radius:10px; font-weight:700">Tue 14 May · 11:00</div>
<div style="background:white; color:var(--ink); padding:10px; border-radius:10px; font-weight:700">Tue 14 May · 15:30</div>
<div style="background:rgba(255,255,255,0.1); color:white; border:1px solid rgba(255,255,255,0.2); padding:10px; border-radius:10px">Wed 15 May · 10:00</div>
<div style="background:rgba(255,255,255,0.1); color:white; border:1px solid rgba(255,255,255,0.2); padding:10px; border-radius:10px">Sat 18 May · 11:30</div>
</div>
<p style="font-size:12px; color:#A8C0BE; margin:10px 0 0">We fit you and measure the courtyard — bring your usual load if you can.</p>
</div>
</div>
</section>
</main>
<footer>
<div class="container">
<div class="footer-grid">
<div>
<div class="logo" style="color:white; margin-bottom:10px">
<span class="logo-mark" style="background:white; color:var(--teal)">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7">
<circle cx="12" cy="12" r="7.5"></circle><path d="M12 4.5v15 M4.5 12h15"></path><circle cx="12" cy="12" r="2"></circle>
</svg>
</span>
<span>LUMEN CYCLES</span>
</div>
<p>Lumen Cycles ApS · CVR 38472918<br>Nordre Refshalevej 45, 1436 København K<br>Built to order since 2014 — 19 people, one workshop.</p>
<p style="margin-top:10px; font-size:12px; opacity:.7">We don’t do Black Friday. We do bikes that last 20 years. If you want a discount bike, we’ll happily recommend one. If you want a forever bike, we’re here.</p>
</div>
<div>
<h4>Explore</h4>
<p><a href="#models">Models & Pricing</a><br><a href="#craft">Workshop & Warranty</a><br><a href="#process">Order Process</a><br><a href="#reviews">Owner Reviews</a></p>
</div>
<div>
<h4>Support</h4>
<p><a href="#" onclick="event.preventDefault(); alert('Service manual: sent to your email. (Demo)')">Service Manuals</a><br><a href="#" onclick="event.preventDefault(); alert('Spare parts store — coming online (demo)')">Spare Parts</a><br><a href="#">Contact Builders</a><br><a href="#">Privacy · Terms</a></p>
</div>
<div>
<h4>Get the build diary</h4>
<p>Occasional workshop notes, no spam. See a bike go from tubes to street.</p>
<form class="newsletter" onsubmit="handleNewsletter(event)">
<input type="email" placeholder="Your email" required aria-label="Email for newsletter">
<button class="btn" type="submit" style="padding:12px 16px; background:var(--accent); color:var(--ink); border-color:var(--accent)">Join</button>
</form>
<div id="nlMsg" style="display:none; margin-top:8px; font-size:12px; background:rgba(255,255,255,0.1); padding:8px 10px; border-radius:8px"></div>
<p style="font-size:12px; opacity:.6; margin-top:8px">By joining you agree to our privacy policy. Unsubscribe anytime.</p>
</div>
</div>
<div class="legal">
<span>© <span id="year"></span> Lumen Cycles ApS. Handmade in Copenhagen. VAT DK38472918.</span>
<span>Design: our workshop · Type: system fonts · No trackers. <span style="text-decoration:underline">Cookie preferences: essential only</span></span>
</div>
</div>
</footer>
<script>
// Mobile menu
const hamburger = document.getElementById('hamburger');
const drawer = document.getElementById('drawer');
hamburger.addEventListener('click', () => {
const open = drawer.classList.toggle('open');
hamburger.setAttribute('aria-expanded', open);
});
drawer.querySelectorAll('a').forEach(a => a.addEventListener('click', ()=> drawer.classList.remove('open')));
// FAQ accordion
document.querySelectorAll('.faq-q').forEach(btn=>{
btn.addEventListener('click', ()=>{
const item = btn.closest('.faq-item');
const wasOpen = item.classList.contains('open');
document.querySelectorAll('.faq-item').forEach(i=>{
i.classList.remove('open');
i.querySelector('.faq-q').setAttribute('aria-expanded','false');
i.querySelector('.faq-a').style.display='none';
});
if(!wasOpen){
item.classList.add('open');
btn.setAttribute('aria-expanded','true');
item.querySelector('.faq-a').style.display='block';
}
});
});
// Configurator logic
const models = {
carry:{name:'Lumen Carry', base:4200, label:'CITY COMPACT'},
haul:{name:'Lumen Haul', base:4850, label:'HEAVY DUTY'},
duo:{name:'Lumen Duo', base:5400, label:'KIDS & COMFORT'}
};
const colors = {
paper:{name:'Paper White', hex:'#F9F7F2', text:'#121412'},
forest:{name:'Forest Green', hex:'#1A3937', text:'#FFFFFF'},
amber:{name:'Copenhagen Amber', hex:'#E8B441', text:'#121412'},
slate:{name:'Harbour Slate', hex:'#5A6360', text:'#FFFFFF'}
};
let state = {model:'carry', color:'paper', colorPrice:0, addons:{extender:false, canopy:false, seats:false, boxcover:false}};
const modelChoices = document.querySelectorAll('#modelChoices .choice');
const colorChoices = document.querySelectorAll('#colorChoices .choice');
const addonEls = document.querySelectorAll('.addons .addon');
const totalPriceEl = document.getElementById('totalPrice');
const rowBase = document.getElementById('rowBase');
const rowColor = document.getElementById('rowColor');
const rowAddons = document.getElementById('rowAddons');
const summaryName = document.getElementById('summaryName');
const previewText = document.getElementById('previewText');
const boxColor = document.getElementById('boxColor');
function updatePrice(){
const base = models[state.model].base;
const addonsTotal = (state.addons.extender?650:0) + (state.addons.canopy?450:0) + (state.addons.seats?290:0) + (state.addons.boxcover?180:0);
const colorExtra = state.colorPrice;
const delivery = 149;
const total = base + colorExtra + addonsTotal + delivery;
rowBase.textContent = '€' + base.toLocaleString('de-DE');
rowColor.textContent = colorExtra ? '+€'+colorExtra : 'Included';
rowAddons.textContent = addonsTotal ? '€'+addonsTotal.toLocaleString('de-DE') : '€0';
totalPriceEl.textContent = '€' + total.toLocaleString('de-DE');
summaryName.textContent = models[state.model].name + ' — ' + colors[state.color].name;
previewText.textContent = 'LUMEN ' + models[state.model].label + ' — ' + colors[state.color].name.toUpperCase();
boxColor.setAttribute('fill', colors[state.color].hex);
previewText.setAttribute('fill', colors[state.color].text === '#FFFFFF' ? '#FFFFFF' : '#121412');
// handle motor inclusion logic display
const motorLabel = document.querySelector('[data-addon="motor"]');
if(state.model === 'carry'){
motorLabel.style.opacity = '.6';
motorLabel.innerHTML = '<span style="display:flex; gap:10px; align-items:center"><input type="checkbox"> Add Bosch Cargo Line motor + 500Wh</span><strong>+€950</strong>';
// make it interactive for Carry
motorLabel.dataset.price="950";
motorLabel.classList.toggle('active', !!state.addons.motor);
} else {
motorLabel.style.opacity = '1';
motorLabel.innerHTML = '<span style="display:flex; gap:10px; align-items:center"><input type="checkbox" checked disabled> Bosch Cargo Line motor + 500Wh <em style="font-size:11px; background:var(--teal); color:white; padding:2px 6px; border-radius:999px; font-style:normal">Included on Haul/Duo</em></span><strong>Incl.</strong>';
motorLabel.dataset.price="0";
}
}
modelChoices.forEach(btn=>{
btn.addEventListener('click', ()=>{
modelChoices.forEach(b=>{b.classList.remove('active'); b.setAttribute('aria-pressed','false')});
btn.classList.add('active'); btn.setAttribute('aria-pressed','true');
state.model = btn.dataset.model;
// reset motor addon logic when switching to carry: allow motor
if(state.model === 'carry' && state.addons.motor === undefined) state.addons.motor = false;
updatePrice();
});
});
colorChoices.forEach(btn=>{
btn.addEventListener('click', ()=>{
colorChoices.forEach(b=>b.classList.remove('active'));
btn.classList.add('active');
state.color = btn.dataset.color;
state.colorPrice = parseInt(btn.dataset.price,10);
updatePrice();
});
});
addonEls.forEach(el=>{
el.addEventListener('click', (e)=>{
if(el.dataset.addon === 'motor' && state.model !== 'carry') return; // included, not toggleable
const cb = el.querySelector('input');
// toggle
if(e.target.tagName !== 'INPUT'){
cb.checked = !cb.checked;
}
const key = el.dataset.addon;
state.addons[key] = cb.checked;
el.classList.toggle('active', cb.checked);
updatePrice();
});
});
// extend motor handling for carry
document.addEventListener('click', (e)=>{
const motorEl = document.querySelector('[data-addon="motor"]');
if(motorEl && state.model === 'carry'){
motorEl.addEventListener('click', function handler(){
const cb = motorEl.querySelector('input');
state.addons.motor = cb.checked;
motorEl.classList.toggle('active', cb.checked);
// add to price if motor selected
const addonsTotalMotor = state.addons.motor ? 950 : 0;
// need to include in updatePrice - patch
const base = models[state.model].base;
const addonsTotal = (state.addons.extender?650:0) + (state.addons.canopy?450:0) + (state.addons.seats?290:0) + (state.addons.boxcover?180:0) + addonsTotalMotor;
const total = base + state.colorPrice + addonsTotal + 149;
rowBase.textContent = '€' + base.toLocaleString('de-DE');
rowColor.textContent = state.colorPrice ? '+€'+state.colorPrice : 'Included';
rowAddons.textContent = addonsTotal ? '€'+addonsTotal.toLocaleString('de-DE') : '€0';
totalPriceEl.textContent = '€' + total.toLocaleString('de-DE');
}, {once:true});
}
});
function selectModel(model, scroll){
state.model = model;
modelChoices.forEach(b=>{
b.classList.toggle('active', b.dataset.model===model);
b.setAttribute('aria-pressed', b.dataset.model===model ? 'true':'false');
});
updatePrice();
if(scroll){
document.getElementById('configurator').scrollIntoView({behavior:'smooth', block:'start'});
// pulse
const conf = document.querySelector('.configurator');
conf.style.outline='2px solid var(--accent)';
setTimeout(()=>conf.style.outline='none',1200);
}
}
function reserveBuild(){
const msg = document.getElementById('reserveMsg');
msg.style.display='block';
msg.textContent = '✓ Reserved — we’ve saved ' + models[state.model].name + ' in ' + colors[state.color].name + ' for you. We’ll email you within 4 hours to confirm spec and delivery. Deposit is refundable for 14 days.';
msg.scrollIntoView({behavior:'smooth', block:'center'});
}
function handleNewsletter(e){
e.preventDefault();
const m = document.getElementById('nlMsg');
m.style.display='block';
m.textContent='Tak! You’re on the list. First diary entry lands Friday — “How we bend a top tube without kinking it.”';
e.target.reset();
}
document.getElementById('year').textContent = new Date().getFullYear();
// Reveal on scroll
const obs = new IntersectionObserver(entries=>{
entries.forEach(en=>{
if(en.isIntersecting) en.target.classList.add('visible');
});
}, {threshold:0.15});
document.querySelectorAll('.reveal').forEach(el=>obs.observe(el));
// Initial price
updatePrice();
</script>
</body>
</html>

