Run details
- Model
- meta/muse-wonder
- Route
- OpenRouter API, one user message
- Served by
- Meta
- Effort
- medium, OpenRouter's default for this model
- Limits
- 60 min · 30,000 output tokens (our $0.60 limit per run at $20/M)
- Date
- 23 Oct 2026
- Time
- 1 min 51 s
- Size
- 35 kB
- Tokens
- 94 in, 12,395 out (1,303 of them thinking)
- List price
- $0.25 at today's price ($4 in / $20 out per M)
- Paid
- $0.25
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
35 kB 302 lines Raw
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lumen Cycles — Custom Cargo Bikes, Built in Copenhagen</title>
<meta name="description" content="Hand-built custom cargo bikes from Copenhagen. From €3,490. 5-year frame warranty. Built to order in 6–8 weeks.">
<style>
*{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#F6F1E8;--paper:#FFFDF8;--ink:#15251F;--muted:#6B7770;--green:#173E31;--green2:#245C47;--clay:#C75B32;--clay2:#A94A27;--sand:#E9DFC9;--line:#E3DACA;--gold:#D9A441;--radius:20px}
html{scroll-behavior:smooth}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--ink);line-height:1.6;overflow-x:hidden}
a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}img,svg{display:block;max-width:100%}
.container{width:min(1180px,92%);margin:0 auto}
.serif{font-family:Georgia,'Times New Roman',Times,serif}
.topbar{background:var(--ink);color:#EDE6D6;font-size:13px;letter-spacing:.02em}
.topbar .container{display:flex;justify-content:space-between;gap:16px;padding:9px 0;flex-wrap:wrap}
.topbar b{color:#F2C979;font-weight:600}
header{position:sticky;top:0;z-index:50;background:rgba(246,241,232,.92);backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:.25s}
header.scrolled{border-color:var(--line);box-shadow:0 10px 30px rgba(21,37,31,.08)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:18px 0;gap:20px}
.logo{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.12em;font-size:15px}
.logo-mark{width:42px;height:42px;background:var(--green);color:#fff;border-radius:50%;display:grid;place-items:center;font-family:Georgia,serif;font-size:22px;letter-spacing:0;position:relative}
.logo-mark:after{content:"";position:absolute;inset:5px;border:1px solid rgba(255,255,255,.35);border-radius:50%}
.logo small{display:block;letter-spacing:.22em;font-size:9px;color:var(--clay);font-weight:700;margin-top:1px}
.nav-links{display:flex;gap:32px;font-size:14.5px;font-weight:500;color:#3C4A43}
.nav-links a:hover{color:var(--clay)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--clay);color:#fff;padding:14px 24px;border-radius:999px;font-weight:700;font-size:14.5px;border:1px solid var(--clay);transition:.2s;white-space:nowrap}
.btn:hover{background:var(--clay2);transform:translateY(-1px);box-shadow:0 10px 22px rgba(199,91,50,.25)}
.btn.dark{background:var(--green);border-color:var(--green)}.btn.dark:hover{background:var(--green2)}
.btn.ghost{background:transparent;color:var(--ink);border-color:#CFC4AC}.btn.ghost:hover{background:#fff;box-shadow:none}
.menu-btn{display:none;background:none;border:0;font-size:26px}
.hero{padding:58px 0 28px;position:relative}
.hero:before{content:"KØBENHAVN • EST. 2016 • REF SHALEØEN";position:absolute;top:88px;right:-40px;transform:rotate(90deg);font-size:10px;letter-spacing:.35em;color:#B7AA8F;font-weight:700}
.hero-grid{display:grid;grid-template-columns:1.02fr 1.18fr;gap:48px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);padding:7px 13px;border-radius:999px;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.eyebrow i{width:8px;height:8px;background:#2E9E63;border-radius:50%;box-shadow:0 0 0 4px #DFF2E6;display:block}
h1{font-family:Georgia,serif;font-size:clamp(44px,6vw,74px);line-height:.96;letter-spacing:-.03em;font-weight:500;margin:22px 0 20px}
h1 em{color:var(--clay);font-style:italic}
.lead{font-size:18.5px;color:#4A5A52;max-width:560px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0 22px}
.price-note{display:flex;gap:18px;flex-wrap:wrap;font-size:13.5px;color:var(--muted)}
.price-note b{color:var(--ink);font-size:15px}
.trust-row{display:flex;gap:22px;margin-top:28px;padding-top:22px;border-top:1px solid var(--line);flex-wrap:wrap}
.trust-row div b{font-family:Georgia,serif;font-size:22px;display:block;line-height:1}
.trust-row div span{font-size:12.5px;color:var(--muted)}
.hero-card{background:linear-gradient(180deg,#DCE9DE 0%,#F3EAD3 72%,#EADFC6 100%);border:1px solid #D8CDB2;border-radius:28px;padding:28px 24px 20px;position:relative;overflow:hidden;box-shadow:0 24px 50px rgba(21,37,31,.13)}
.hero-card:before{content:"";position:absolute;width:340px;height:340px;background:radial-gradient(circle,#FFF6C9 0%,rgba(255,246,201,0) 65%);top:-80px;right:-40px}
.badge{position:absolute;top:18px;left:18px;background:var(--ink);color:#fff;padding:8px 12px;border-radius:999px;font-size:12px;font-weight:700;z-index:2}
.badge span{color:#F2C979}
.price-pill{position:absolute;right:18px;bottom:18px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px 14px;box-shadow:0 12px 28px rgba(0,0,0,.12);z-index:2}
.price-pill b{font-size:20px}.price-pill span{display:block;font-size:11px;color:var(--muted);letter-spacing:.05em;text-transform:uppercase;font-weight:700}
.dots{display:flex;gap:8px;justify-content:center;margin-top:14px;position:relative;z-index:2}
.dot{width:28px;height:28px;border-radius:50%;border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.18);cursor:pointer}
.dot.active{outline:2px solid var(--ink);outline-offset:2px}
.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper);margin-top:44px}
.strip .container{display:flex;justify-content:space-between;gap:24px;padding:18px 0;flex-wrap:wrap;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#7A847E;font-weight:700;text-align:center}
.section{padding:86px 0}.section-head{max-width:720px;margin-bottom:42px}
.section-head.center{margin-inline:auto;text-align:center}
.kicker{color:var(--clay);font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:800;margin-bottom:12px}
h2{font-family:Georgia,serif;font-size:clamp(32px,4vw,50px);line-height:1.05;letter-spacing:-.02em;font-weight:500}
.section-head p{color:var(--muted);margin-top:14px;font-size:17px}
.models{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:22px;overflow:hidden;transition:.25s}
.card:hover{transform:translateY(-5px);box-shadow:0 22px 40px rgba(21,37,31,.11)}
.card-img{height:210px;display:grid;place-items:center;padding:20px;position:relative}
.card-img span{position:absolute;top:14px;left:14px;background:#fff;padding:6px 10px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.card-body{padding:24px}
.card-body h3{font-family:Georgia,serif;font-size:26px}
.card-body p{color:var(--muted);font-size:14.5px;margin:8px 0 16px;min-height:66px}
.specs{display:grid;grid-template-columns:1fr 1fr;gap:10px;border-top:1px solid #EEE6D6;padding-top:16px;margin-bottom:18px}
.specs b{font-size:15px;display:block}.specs span{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700}
.card-foot{display:flex;justify-content:space-between;align-items:center}
.card-foot b{font-size:20px}.card-foot b small{font-size:12px;color:var(--muted);font-weight:500}
.link{font-weight:700;font-size:14px;color:var(--clay)}
.builder{background:var(--ink);color:#F3EDDD;border-radius:28px;overflow:hidden;display:grid;grid-template-columns:1.1fr .9fr}
.builder-left{padding:38px}
.builder-left h2{color:#fff}.builder-left>p{color:#BFC9BF;margin:10px 0 26px}
.group{margin-bottom:26px}.group>label{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#F2C979;font-weight:800;margin-bottom:11px}
.pills{display:flex;gap:9px;flex-wrap:wrap}
.pill{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);color:#fff;padding:11px 14px;border-radius:999px;font-size:14px}
.pill.active{background:#fff;color:var(--ink);border-color:#fff;font-weight:700}
.swatches{display:flex;gap:10px}
.swatch{width:38px;height:38px;border-radius:50%;border:3px solid rgba(255,255,255,.25);cursor:pointer}.swatch.active{border-color:#fff;transform:scale(1.08)}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.check{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:12px;display:flex;justify-content:space-between;gap:8px;font-size:13.5px;cursor:pointer}
.check input{accent-color:var(--clay)}
.builder-right{background:#FFFDF8;color:var(--ink);padding:30px}
.builder-bike{background:linear-gradient(180deg,#E6EFE6,#F6EEDA);border-radius:18px;padding:12px;border:1px solid var(--line)}
.summary{margin-top:20px}.row{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px dashed #E7DDC8;font-size:14px;color:#5A6A61}.row b{color:var(--ink)}
.total{display:flex;justify-content:space-between;align-items:end;padding:16px 0 6px}.total b{font-family:Georgia,serif;font-size:36px;line-height:1}
.finance{font-size:13px;color:var(--muted);background:#F6F1E8;border-radius:12px;padding:12px;margin:12px 0 18px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.step{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:24px}
.step-num{width:42px;height:42px;border-radius:50%;background:var(--sand);display:grid;place-items:center;font-family:Georgia,serif;font-weight:700;margin-bottom:16px}
.step h3{font-size:17px;margin-bottom:8px}.step p{font-size:14px;color:var(--muted)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.workshop-visual{background:var(--green);border-radius:24px;padding:28px;color:#fff;min-height:420px;position:relative;overflow:hidden}
.workshop-visual h3{font-family:Georgia,serif;font-size:30px;line-height:1.1;max-width:320px}
.mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:26px}
.mini{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.15);border-radius:14px;padding:16px}.mini b{font-size:22px;display:block}.mini span{font-size:12px;color:#CBD8CC}
.checklist{list-style:none;margin-top:20px}.checklist li{padding:11px 0;border-bottom:1px solid var(--line);display:flex;gap:12px;font-size:15px}.checklist li:before{content:"✓";width:24px;height:24px;background:#DFF0E3;color:#1B6B3A;border-radius:50%;display:grid;place-items:center;font-weight:800;flex-shrink:0;font-size:13px}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.quote{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:26px}
.stars{color:#D99A20;letter-spacing:2px}.quote p{font-family:Georgia,serif;font-size:18px;line-height:1.45;margin:14px 0 20px}
.person{display:flex;gap:12px;align-items:center}.avatar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800}
.person b{display:block;font-size:14px}.person span{font-size:12.5px;color:var(--muted)}
.faq{max-width:820px;margin:0 auto}
.faq-item{background:var(--paper);border:1px solid var(--line);border-radius:14px;margin-bottom:10px;overflow:hidden}
.faq-q{width:100%;background:none;border:0;padding:20px 22px;display:flex;justify-content:space-between;text-align:left;font-weight:700;gap:16px}
.faq-a{max-height:0;overflow:hidden;transition:.3s;color:var(--muted);font-size:15px}.faq-a div{padding:0 22px 20px}
.cta{background:linear-gradient(120deg,#173E31,#245C47);border-radius:28px;padding:44px;display:grid;grid-template-columns:1fr 1fr;gap:40px;color:#fff}
.cta p{color:#C7D6C8;margin-top:12px}
form{background:#fff;color:var(--ink);border-radius:18px;padding:24px}
form label{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;display:block;margin:14px 0 6px}
form input,form select{width:100%;padding:13px 14px;border:1px solid #DAD0B8;border-radius:10px;background:#FFFDF8;font:inherit}
.success{display:none;background:#E6F4E9;border:1px solid #BFE3C8;color:#17512A;padding:14px;border-radius:12px;margin-top:14px;font-size:14px}
footer{padding:54px 0 30px;border-top:1px solid var(--line);color:var(--muted);font-size:14px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;margin-bottom:34px}
footer b{color:var(--ink)}footer li{list-style:none;margin:7px 0}
.reveal{opacity:0;transform:translateY(18px);transition:.6s}.reveal.visible{opacity:1;transform:none}
@media(max-width:900px){.hero-grid,.split,.cta{grid-template-columns:1fr}.models,.quotes{grid-template-columns:1fr}.steps{grid-template-columns:1fr 1fr}.builder{grid-template-columns:1fr}.nav-links{display:none;position:absolute;top:78px;left:4%;right:4%;background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px;flex-direction:column;box-shadow:0 20px 40px rgba(0,0,0,.12)}.nav-links.open{display:flex}.menu-btn{display:block}.nav .btn{display:none}.footer-grid{grid-template-columns:1fr 1fr}.checks{grid-template-columns:1fr}}
</style>
</head>
<body>
<div class="topbar"><div class="container"><span>🚲 <b>Test rides this week:</b> Tue–Sat, Refshaleøen workshop</span><span>Built to order in Copenhagen · From €3,490 · 5-year frame warranty</span></div></div>
<header id="header"><div class="container nav">
<a class="logo" href="#"><span class="logo-mark">L</span><span>LUMEN<small>CYCLES · COPENHAGEN</small></span></a>
<nav class="nav-links" id="navLinks"><a href="#models">Models</a><a href="#builder">Build yours</a><a href="#process">How it works</a><a href="#workshop">Workshop</a><a href="#stories">Owners</a><a href="#faq">FAQ</a></nav>
<a href="#book" class="btn">Book a test ride →</a><button class="menu-btn" id="menuBtn" aria-label="Menu">☰</button>
</div></header>
<main>
<section class="hero"><div class="container hero-grid">
<div class="reveal visible">
<span class="eyebrow"><i></i> Hand-built in Copenhagen · 840+ bikes on the road</span>
<h1>Carry everything.<br><em>Own the city.</em></h1>
<p class="lead">A custom cargo bike built around your family, your route and your life — not a warehouse spec sheet. Designed, welded and assembled by hand in our Refshaleøen workshop.</p>
<div class="hero-cta"><a href="#builder" class="btn">Build your Lumen — from €3,490</a><a href="#book" class="btn ghost">Book a free test ride</a></div>
<div class="price-note"><span><b>€800</b> deposit to reserve</span><span><b>6–8 weeks</b> build time</span><span><b>0%</b> for 12 months available</span></div>
<div class="trust-row"><div><b>4.9 / 5</b><span>from 312 owner reviews</span></div><div><b>5 years</b><span>frame warranty</span></div><div><b>200 kg</b><span>max system weight</span></div></div>
</div>
<div class="hero-card reveal visible">
<span class="badge">LUMEN BOX · <span id="heroColorName">Forest Green</span></span>
<!-- CARGO BIKE SVG -->
<svg viewBox="0 0 640 360" role="img" aria-label="Lumen Box cargo bike illustration">
<ellipse cx="320" cy="312" rx="250" ry="16" fill="rgba(21,37,31,.14)"/>
<circle cx="105" cy="78" r="34" fill="#FFE9A8" opacity=".8"/>
<path d="M0 290 H640" stroke="#CBBE9E" stroke-width="2" stroke-dasharray="8 8"/>
<g fill="none" stroke="#22302A" stroke-width="5" stroke-linecap="round"><circle cx="145" cy="275" r="48"/><circle cx="475" cy="265" r="62"/></g>
<g stroke="#8A9A90" stroke-width="2"><path d="M145 227v96M97 275h96M111 241l68 68M179 241l-68 68"/><path d="M475 203v124M413 265h124M431 221l88 88M519 221l-88 88"/></g>
<circle cx="145" cy="275" r="10" fill="#22302A"/><circle cx="475" cy="265" r="12" fill="#22302A"/>
<path class="paint" d="M205 185 L335 185 L355 275 L185 275 Z" fill="#245C47"/>
<path d="M205 185 L335 185 L342 220 L198 220 Z" fill="rgba(255,255,255,.18)"/>
<path d="M355 250 L430 205 L475 265" fill="none" stroke="#22302A" stroke-width="8" stroke-linecap="round"/>
<path d="M185 275 L260 205 L145 275" fill="none" stroke="#22302A" stroke-width="7" stroke-linecap="round"/>
<path d="M430 205 L420 150" stroke="#22302A" stroke-width="7" stroke-linecap="round"/><path d="M395 148 Q420 132 448 148" fill="none" stroke="#22302A" stroke-width="7" stroke-linecap="round"/>
<path d="M475 265 L455 175" stroke="#22302A" stroke-width="7" stroke-linecap="round"/><path d="M430 172 H482" stroke="#22302A" stroke-width="8" stroke-linecap="round"/>
<rect x="228" y="155" width="72" height="18" rx="9" fill="#8B5E34"/><rect x="245" y="132" width="38" height="28" rx="6" fill="#FFFCF2" stroke="#D8CDB2"/>
<text x="238" y="245" font-family="Georgia" font-size="22" fill="white" font-weight="bold">LUMEN</text>
</svg>
<div class="dots" id="heroDots"></div>
<div class="price-pill"><span>Lumen Box</span><b>€4,290</b></div>
</div>
</div></section>
<div class="strip"><div class="container"><span>As featured in Monocle</span><span>Politiken ★★★★★</span><span>Danish Design Award Finalist</span><span>Copenhagenize Approved</span><span>840+ Families Riding</span></div></div>
<section class="section" id="models"><div class="container">
<div class="section-head reveal"><p class="kicker">01 — Choose your platform</p><h2>Three bikes. One perfect fit for your life.</h2><p>Every Lumen starts as a bare frame in Copenhagen. You choose the size, colour, motor, battery and details — we build exactly that bike, for exactly your streets.</p></div>
<div class="models">
<article class="card reveal"><div class="card-img" style="background:#EAF0E6"><span>Most popular</span><svg viewBox="0 0 300 150" width="260"><g fill="none" stroke="#22302A" stroke-width="4"><circle cx="65" cy="110" r="28"/><circle cx="230" cy="105" r="36"/></g><path d="M95 70h70l8 42H88z" fill="#245C47"/><path d="M173 95l35-22 22 32M65 110l40-28" stroke="#22302A" stroke-width="5" fill="none"/></svg></div><div class="card-body"><h3>Lumen Box</h3><p>The family flagship. Two kids, a week of groceries, a dog — and still room for tomorrow. Low centre of gravity, rain-ready box.</p><div class="specs"><div><b>100 kg</b><span>Box payload</span></div><div><b>85–130 km</b><span>Range</span></div><div><b>32 kg</b><span>Weight</span></div><div><b>Shimano EP6</b><span>Motor</span></div></div><div class="card-foot"><b>€4,290 <small>incl. VAT</small></b><a class="link" href="#builder">Build Box →</a></div></div></article>
<article class="card reveal"><div class="card-img" style="background:#F3E9D2"><span>Best for daily life</span><svg viewBox="0 0 300 150" width="260"><g fill="none" stroke="#22302A" stroke-width="4"><circle cx="70" cy="108" r="34"/><circle cx="235" cy="108" r="34"/></g><path d="M70 108 L140 65 L235 108 M140 65 L155 108" stroke="#C75B32" stroke-width="6" fill="none"/><rect x="185" y="58" width="70" height="10" rx="5" fill="#22302A"/></svg></div><div class="card-body"><h3>Lumen Longtail</h3><p>Agile like a normal bike, capable like a car. School run, sports gear and a second passenger — without the parking headache.</p><div class="specs"><div><b>80 kg</b><span>Rear payload</span></div><div><b>90–140 km</b><span>Range</span></div><div><b>28 kg</b><span>Weight</span></div><div><b>Shimano EP6</b><span>Motor</span></div></div><div class="card-foot"><b>€3,890 <small>incl. VAT</small></b><a class="link" href="#builder">Build Longtail →</a></div></div></article>
<article class="card reveal"><div class="card-img" style="background:#E8EAF2"><span>Small spaces</span><svg viewBox="0 0 300 150" width="260"><g fill="none" stroke="#22302A" stroke-width="4"><circle cx="85" cy="110" r="30"/><circle cx="220" cy="110" r="30"/></g><path d="M85 110 L150 70 L220 110 M150 70 L160 110" stroke="#2F4A7A" stroke-width="6" fill="none"/><rect x="105" y="82" width="52" height="28" rx="6" fill="#2F4A7A"/></svg></div><div class="card-body"><h3>Lumen Compact</h3><p>For courtyards, elevators and tight bike rooms. Fits one child and serious cargo, folds its handlebar flat in seconds.</p><div class="specs"><div><b>60 kg</b><span>Payload</span></div><div><b>70–110 km</b><span>Range</span></div><div><b>25 kg</b><span>Weight</span></div><div><b>Shimano EP6</b><span>Motor</span></div></div><div class="card-foot"><b>€3,490 <small>incl. VAT</small></b><a class="link" href="#builder">Build Compact →</a></div></div></article>
</div></div></section>
<section class="section" style="padding-top:10px" id="builder"><div class="container">
<div class="builder reveal">
<div class="builder-left"><p class="kicker" style="color:#F2C979">02 — Build yours</p><h2>Configure it. See the real price.</h2><p>No hidden extras. No “from” games. This is the exact bike we’ll quote, build and deliver.</p>
<div class="group"><label>Model</label><div class="pills" id="modelPills"><button class="pill" data-model="box">Box · €4,290</button><button class="pill active" data-model="longtail">Longtail · €3,890</button><button class="pill" data-model="compact">Compact · €3,490</button></div></div>
<div class="group"><label>Colour — hand-painted</label><div class="swatches" id="swatches"></div><p id="colorName" style="margin-top:9px;font-size:13px;color:#D8E0D5">Forest Green</p></div>
<div class="group"><label>Motor & battery</label><div class="pills" id="motorPills"><button class="pill active" data-add="0" data-range="110">EP6 · 630Wh included</button><button class="pill" data-add="490" data-range="125">EP8 · +€490</button><button class="pill" data-add="1080" data-range="185">EP8 Dual Battery · +€1,080</button></div></div>
<div class="group"><label>Family & weather extras</label><div class="checks" id="extras">
<label class="check"><span><input type="checkbox" value="289"> Rain canopy</span><b>€289</b></label>
<label class="check"><span><input type="checkbox" value="179" checked> Child bench + belts</span><b>€179</b></label>
<label class="check"><span><input type="checkbox" value="119"> GPS + frame lock</span><b>€119</b></label>
<label class="check"><span><input type="checkbox" value="149"> Premium lights</span><b>€149</b></label>
</div></div></div>
<div class="builder-right">
<div class="builder-bike"><svg viewBox="0 0 640 300"><ellipse cx="320" cy="268" rx="240" ry="12" fill="rgba(0,0,0,.12)"/><g fill="none" stroke="#22302A" stroke-width="5"><circle cx="145" cy="230" r="42"/><circle cx="475" cy="222" r="54"/></g><path class="paint" d="M205 150 L335 150 L352 232 L188 232Z" fill="#245C47"/><path d="M352 210 L430 168 L475 222 M188 232 L260 168 L145 230 M430 168 L422 118 M452 130 H478 L460 170" stroke="#22302A" stroke-width="7" fill="none" stroke-linecap="round"/><text x="235" y="205" font-family="Georgia" font-size="20" fill="#fff" font-weight="bold">LUMEN</text></svg></div>
<div class="summary">
<div class="row"><span id="sumModel">Lumen Longtail base</span><b id="sumBase">€3,890</b></div>
<div class="row"><span>Motor / battery</span><b id="sumMotor">Included</b></div>
<div class="row"><span>Extras</span><b id="sumExtras">€179</b></div>
<div class="row"><span>Estimated range</span><b id="sumRange">~110 km</b></div>
<div class="row"><span>Ready for pickup</span><b id="sumDate">—</b></div>
<div class="total"><span>Total incl. VAT<br><small style="color:#888">Free first service included</small></span><b id="sumTotal">€4,069</b></div>
<div class="finance" id="finance">€800 deposit today · €169/mo for 24 mo · Remainder only when you collect your bike.</div>
<a href="#book" class="btn dark" style="width:100%">Reserve this build with €800 →</a>
<p style="font-size:12px;color:#888;text-align:center;margin-top:10px">Fully refundable for 14 days. No payment taken on this page.</p>
</div></div>
</div></div></section>
<section class="section" id="process"><div class="container">
<div class="section-head center reveal"><p class="kicker">03 — How it works</p><h2>From first ride to first school run, in 6–8 weeks.</h2></div>
<div class="steps">
<div class="step reveal"><div class="step-num">1</div><h3>Test ride & talk</h3><p>Come to Refshaleøen, ride all three models with weight in them, and talk routes, kids and storage with a builder — not a salesperson.</p></div>
<div class="step reveal"><div class="step-num">2</div><h3>Fit & design</h3><p>We measure you, choose gearing for your bridges and hills, and sign off a written spec and fixed price. €800 deposit reserves your slot.</p></div>
<div class="step reveal"><div class="step-num">3</div><h3>Hand-built here</h3><p>Your frame is painted, laced, wired and test-ridden in Copenhagen. You get photo updates at paint, assembly and final QC.</p></div>
<div class="step reveal"><div class="step-num">4</div><h3>Collect & ride</h3><p>One-hour handover, first service free at 6 weeks, and our workshop prioritises Lumen owners for life. Remainder paid only now.</p></div>
</div></div></section>
<section class="section" style="padding-top:0" id="workshop"><div class="container split">
<div class="workshop-visual reveal"><p style="letter-spacing:.2em;font-size:11px;color:#F2C979;font-weight:800">OUR WORKSHOP — REF SHALEØEN</p><h3 style="margin-top:14px">You can watch your bike being built.</h3><div class="mini-grid"><div class="mini"><b>9</b><span>builders & mechanics on site</span></div><div class="mini"><b>14 hrs</b><span>of hand assembly per bike</span></div><div class="mini"><b>62</b><span>point final quality check</span></div><div class="mini"><b>48 hrs</b><span>priority repair turnaround</span></div></div><p style="margin-top:22px;color:#DCE7DC;font-size:14px">Refshalevej 163, 1432 København K<br>Open Tue–Fri 10–18 · Sat 10–15 · CVR 37 42 19 08</p></div>
<div class="reveal"><p class="kicker">Why families trust us with €4,000</p><h2>Built to be serviced, not replaced.</h2><ul class="checklist"><li><b>5-year frame warranty</b> and 2 years on motor & battery, handled in-house.</li><li><b>Standard parts only</b> — Shimano, Schwalbe, Busch+Müller. Any good bike shop can service it.</li><li><b>Loan bike guarantee</b> if your Lumen ever needs more than 48 hours with us.</li><li><b>Trade-back promise:</b> we’ll buy your Lumen back or sell it on for you when kids outgrow it.</li><li><b>Written fixed price</b> before we start. The quote we sign is the price you pay.</li></ul></div>
</div></section>
<section class="section" style="padding-top:0" id="stories"><div class="container">
<div class="section-head reveal"><p class="kicker">04 — Owners</p><h2>Copenhagen families who sold the second car.</h2></div>
<div class="quotes">
<article class="quote reveal"><div class="stars">★★★★★</div><p>“We do nursery, work and Netto on one charge. It paid for itself in 11 months of cancelled car costs.”</p><div class="person"><span class="avatar" style="background:#245C47">MK</span><span><b>Mette & Kasper</b><span>Box · Nørrebro · 4,200 km</span></span></div></article>
<article class="quote reveal"><div class="stars">★★★★★</div><p>“I test-rode three brands. Lumen were the only ones who asked where I actually ride — then geared it for that bridge.”</p><div class="person"><span class="avatar" style="background:#C75B32">JL</span><span><b>Jonas Lind</b><span>Longtail · Amager · 6,800 km</span></span></div></article>
<article class="quote reveal"><div class="stars">★★★★★</div><p>“A puncture on Tuesday, loan bike by lunch, mine back Thursday. That service is why you buy local.”</p><div class="person"><span class="avatar" style="background:#2F4A7A">AS</span><span><b>Amira Said</b><span>Compact · Valby · 2,900 km</span></span></div></article>
</div></div></section>
<section class="section" style="padding-top:0" id="faq"><div class="container">
<div class="section-head center reveal"><p class="kicker">Questions</p><h2>Everything you’d ask before spending €4,000.</h2></div>
<div class="faq" id="faqList">
<div class="faq-item"><button class="faq-q">How much do I pay, and when? <span>+</span></button><div class="faq-a"><div>€800 deposit reserves your build slot and is fully refundable for 14 days. The remainder is paid only at collection, after your test ride of your finished bike. 0% finance for 12 months is available via our Danish banking partner.</div></div></div>
<div class="faq-item"><button class="faq-q">What if it doesn’t fit our life? <span>+</span></button><div class="faq-a"><div>Take 30 days. If it genuinely doesn’t work for your family, return it in good condition and we’ll refund you minus €250 for reconditioning. Fewer than 2% ever do.</div></div></div>
<div class="faq-item"><button class="faq-q">Can I really carry two kids safely? <span>+</span></button><div class="faq-a"><div>Yes. The Box is tested to EN 17860 cargo-bike standards, with 5-point belts, a low centre of gravity and hydraulic disc brakes rated for 200 kg total system weight.</div></div></div>
<div class="faq-item"><button class="faq-q">What does servicing cost after year one? <span>+</span></button><div class="faq-a"><div>First service is free. After that, a full annual service is €79 for owners, parts at cost + 10%. We publish our full price list in the workshop — no surprises.</div></div></div>
<div class="faq-item"><button class="faq-q">Do you deliver outside Copenhagen? <span>+</span></button><div class="faq-a"><div>Yes, across Denmark and the EU in a fitted bike crate for €149, fully insured. Most owners still collect in person for the full handover — coffee’s on us.</div></div></div>
</div></div></section>
<section class="section" style="padding-top:0" id="book"><div class="container">
<div class="cta reveal"><div><p class="kicker" style="color:#F2C979">Start here — no commitment</p><h2 style="color:#fff">Book a free test ride this week.</h2><p>Ride all three models, loaded, on real Copenhagen streets. Bring the kids, bring your questions, take as long as you need. If it’s not for you, that’s a good answer too.</p><p style="margin-top:18px">📍 Refshalevej 163, København K<br>☎ +45 32 54 19 08 · hello@lumencycles.dk</p></div>
<form id="bookForm" novalidate><h3 style="font-family:Georgia,serif;font-size:22px">Request a test ride</h3>
<label for="name">Full name</label><input id="name" required placeholder="e.g. Sofie Nielsen">
<label for="email">Email</label><input id="email" type="email" required placeholder="you@example.dk">
<label for="model">I’m most interested in</label><select id="model"><option>Lumen Box — €4,290</option><option>Lumen Longtail — €3,890</option><option>Lumen Compact — €3,490</option><option>Not sure yet — help me choose</option></select>
<label for="date">Preferred date</label><input id="date" type="date" required>
<button class="btn" style="width:100%;margin-top:18px" type="submit">Request my test ride →</button>
<div class="success" id="success">✓ Tak! We’ve received your request. We’ll reply within one working day to confirm your time — usually much faster.</div>
<p style="font-size:12px;color:#888;margin-top:10px;text-align:center">No spam, no obligation. We reply personally.</p></form>
</div></div></section>
</main>
<footer><div class="container"><div class="footer-grid">
<div><div class="logo" style="margin-bottom:12px"><span class="logo-mark">L</span><span>LUMEN<small>CYCLES</small></span></div><p>Custom cargo bikes, hand-built to order in Copenhagen since 2016. Designed for families, built for decades.</p></div>
<div><b>Visit</b><ul><li>Refshalevej 163</li><li>1432 København K</li><li>Tue–Fri 10–18</li><li>Sat 10–15</li></ul></div>
<div><b>Bikes</b><ul><li><a href="#models">Lumen Box</a></li><li><a href="#models">Lumen Longtail</a></li><li><a href="#models">Lumen Compact</a></li><li><a href="#builder">Build yours</a></li></ul></div>
<div><b>Company</b><ul><li>CVR 37 42 19 08</li><li>+45 32 54 19 08</li><li>hello@lumencycles.dk</li><li><a href="#faq">Warranty & FAQ</a></li></ul></div>
</div><div style="border-top:1px solid var(--line);padding-top:18px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px"><span>© 2026 Lumen Cycles ApS. All prices include Danish VAT.</span><span>Made with pride in Copenhagen 🚲</span></div></div></footer>
<script>
const $=s=>document.querySelector(s),$$=s=>[...document.querySelectorAll(s)];
// Header + mobile
addEventListener('scroll',()=>$('#header').classList.toggle('scrolled',scrollY>10));
$('#menuBtn').onclick=()=>$('#navLinks').classList.toggle('open');
$$('#navLinks a').forEach(a=>a.onclick=()=>$('#navLinks').classList.remove('open'));
// Reveal
const io=new IntersectionObserver(e=>e.forEach(x=>x.isIntersecting&&x.target.classList.add('visible')),{threshold:.12});
$$('.reveal').forEach(el=>io.observe(el));
// Colours
const colors=[['Forest Green','#245C47'],['Clay Red','#C75B32'],['Midnight Blue','#2F4A7A'],['Sand','#C9A86A'],['Cream','#E8DFC8']];
let color=colors[0];
function renderSwatches(target,cb){colors.forEach((c,i)=>{const b=document.createElement('button');b.className='dot swatch'+(i===0?' active':'');b.style.background=c[1];b.title=c[0];b.setAttribute('aria-label',c[0]);b.onclick=()=>{target.querySelectorAll('button').forEach(x=>x.classList.remove('active'));b.classList.add('active');cb(c)};target.appendChild(b)})}
function setPaint(c){color=c;$$('.paint').forEach(p=>p.setAttribute('fill',c[1]));$('#colorName').textContent=c[0];const h=$('#heroColorName');if(h)h.textContent=c[0]}
renderSwatches($('#heroDots'),setPaint);renderSwatches($('#swatches'),setPaint);
// Builder
const models={box:['Lumen Box',4290],longtail:['Lumen Longtail',3890],compact:['Lumen Compact',3490]};
let model='longtail',motorAdd=0,range=110;
const fmt=n=>'€'+n.toLocaleString('en-GB');
function update(){
const extras=$$('#extras input:checked').reduce((s,i)=>s+ +i.value,0);
const total=models[model][1]+motorAdd+extras;
$('#sumModel').textContent=models[model][0]+' base';$('#sumBase').textContent=fmt(models[model][1]);
$('#sumMotor').textContent=motorAdd?fmt(motorAdd):'Included';$('#sumExtras').textContent=fmt(extras);
$('#sumRange').textContent='~'+range+' km';$('#sumTotal').textContent=fmt(total);
const d=new Date(Date.now()+49*864e5);
$('#sumDate').textContent=d.toLocaleDateString('en-GB',{day:'numeric',month:'short',year:'numeric'});
$('#finance').textContent=`€800 deposit today · ${fmt(Math.round((total-800)/24))}/mo for 24 mo · Remainder only when you collect your bike.`;
}
$$('#modelPills .pill').forEach(b=>b.onclick=()=>{$$('#modelPills .pill').forEach(x=>x.classList.remove('active'));b.classList.add('active');model=b.dataset.model;update()});
$$('#motorPills .pill').forEach(b=>b.onclick=()=>{$$('#motorPills .pill').forEach(x=>x.classList.remove('active'));b.classList.add('active');motorAdd=+b.dataset.add;range=+b.dataset.range;update()});
$$('#extras input').forEach(i=>i.onchange=update);update();
// FAQ
$$('.faq-item').forEach(item=>{const q=item.querySelector('.faq-q'),a=item.querySelector('.faq-a');q.onclick=()=>{const open=a.style.maxHeight&&a.style.maxHeight!=='0px';$$('.faq-a').forEach(x=>x.style.maxHeight='0px');$$('.faq-q span').forEach(x=>x.textContent='+');if(!open){a.style.maxHeight=a.scrollHeight+'px';q.querySelector('span').textContent='−'}}});
// Form
$('#date').min=new Date().toISOString().split('T')[0];
$('#bookForm').onsubmit=e=>{e.preventDefault();const n=$('#name').value.trim(),em=$('#email').value.trim();
if(n.length<2||!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(em)||!$('#date').value){alert('Please add your name, a valid email and a preferred date — we’ll handle the rest.');return}
$('#success').style.display='block';$('#success').textContent=`✓ Tak, ${n.split(' ')[0]}! We’ve received your request for the ${$('#model').value.split('—')[0].trim()}. We’ll email ${em} within one working day to confirm.`;e.target.querySelector('button').textContent='Request sent ✓';};
</script>
</body>
</html>

