hypeorcode
Network offOpen alone (new tab)

Run details

Model
opencode/mimo-v2.6-flash-free
Route
opencode CLI
Reasoning
provider default
Limits
60 min · 32,000 output tokens
Date
2 Oct 2026
Time
5 min 5 s
Size
67 kB
Tokens
30,956 in, 29,141 out
List price
$0.012 ($0.14 in / $0.28 out per M)
Paid
Not billed per run (CLI plan)

Raw files: output · meta.json

Exact prompt

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

It must be one complete, self-contained HTML file: inline all CSS and JavaScript, and make no network requests of any kind (no CDNs, web fonts or remote images). Save it as index.html in the current directory, then stop. Do not ask questions.

Source

67 kB 1,185 lines Raw

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Lumen Cycles — Custom cargo bikes, built in Copenhagen</title>
<meta name="description" content="Lumen Cycles is a two-person workshop in Nørrebro, Copenhagen. We build one custom cargo bike at a time to your geometry, your load and your street. Twelve weeks from first conversation to handover.">
<style>
/* ============ TOKENS ============ */
:root{
  --ink:#16171B;
  --ink-2:#43464F;
  --ink-3:#71747D;
  --paper:#F6F2EB;
  --paper-2:#EDE6DA;
  --paper-3:#E3DACB;
  --signal:#DC4E17;
  --signal-dk:#B93F11;
  --moss:#3F5546;
  --line:rgba(22,23,27,.14);
  --line-2:rgba(22,23,27,.08);
  --shadow:0 1px 2px rgba(22,23,27,.05),0 12px 32px -12px rgba(22,23,27,.18);
  --shadow-lg:0 2px 4px rgba(22,23,27,.06),0 32px 64px -24px rgba(22,23,27,.28);
  --sans:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --r:14px;
  --max:1180px;
}
/* ============ RESET / BASE ============ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;letter-spacing:-.032em;line-height:1.04;font-weight:680}
p{margin:0}
::selection{background:var(--signal);color:#fff}
:focus-visible{outline:2.5px solid var(--signal);outline-offset:3px;border-radius:4px}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:26px}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;z-index:200}
.skip:focus{left:12px;top:12px}
.grain{position:fixed;inset:0;pointer-events:none;z-index:900;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* ============ TYPE HELPERS ============ */
.eyebrow{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--signal-dk);font-weight:600;display:flex;align-items:center;gap:11px;margin-bottom:20px;
}
.eyebrow::before{content:"";width:26px;height:1.5px;background:var(--signal);flex:none}
.eyebrow.muted{color:var(--ink-3)}
.eyebrow.muted::before{background:var(--ink-3)}
.lede{font-size:19.5px;line-height:1.58;color:var(--ink-2);max-width:60ch}
.sec{padding:110px 0;position:relative}
.sec-head{max-width:760px;margin-bottom:56px}
.sec-head h2{font-size:clamp(32px,4.6vw,52px);margin-bottom:20px}
.num{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;color:var(--ink-3)}
/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 26px;border-radius:100px;border:1.5px solid transparent;
  font-size:15px;font-weight:600;letter-spacing:-.01em;text-decoration:none;cursor:pointer;
  transition:transform .25s cubic-bezier(.22,1,.36,1),background .2s,color .2s,border-color .2s,box-shadow .25s;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--ink);color:var(--paper);box-shadow:var(--shadow)}
.btn-primary:hover{background:var(--signal);box-shadow:0 14px 30px -12px rgba(220,78,23,.6)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink);background:rgba(22,23,27,.04)}
.btn-accent{background:var(--signal);color:#fff;box-shadow:0 12px 28px -14px rgba(220,78,23,.85)}
.btn-accent:hover{background:var(--signal-dk)}
.btn .ar{transition:transform .3s cubic-bezier(.22,1,.36,1)}
.btn:hover .ar{transform:translateX(4px)}
.link-a{
  display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;
  text-decoration:none;color:var(--ink);border-bottom:1.5px solid var(--line);
  padding-bottom:3px;transition:border-color .2s,color .2s;cursor:pointer;background:none;border-top:0;border-left:0;border-right:0;padding-inline:0;
}
.link-a:hover{color:var(--signal);border-color:var(--signal)}
/* ============ HEADER ============ */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background .35s,box-shadow .35s,border-color .35s;
  border-bottom:1px solid transparent;
}
.hdr.scrolled{background:rgba(246,242,235,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:var(--line-2);box-shadow:0 1px 0 rgba(22,23,27,.03)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:76px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.brand svg{width:34px;height:34px}
.brand-tx{display:flex;flex-direction:column;line-height:1}
.brand-tx b{font-size:16.5px;font-weight:700;letter-spacing:-.03em}
.brand-tx span{font-family:var(--mono);font-size:9.5px;letter-spacing:.19em;color:var(--ink-3);text-transform:uppercase;margin-top:4px}
.nav{display:flex;align-items:center;gap:34px}
.nav a{font-size:15px;font-weight:500;text-decoration:none;color:var(--ink-2);position:relative;transition:color .2s}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1.5px;background:var(--signal);transform:scaleX(0);transform-origin:left;transition:transform .32s cubic-bezier(.22,1,.36,1)}
.nav a:hover{color:var(--ink)}
.nav a:hover::after{transform:scaleX(1)}
.hdr-cta{display:flex;align-items:center;gap:14px}
.hdr-cta .btn{padding:12px 22px;font-size:14.5px}
.burger{display:none;width:44px;height:44px;border:1.5px solid var(--line);background:none;border-radius:50%;cursor:pointer;align-items:center;justify-content:center;padding:0}
.burger span{display:block;width:17px;height:1.6px;background:var(--ink);position:relative;transition:transform .3s,background .2s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:17px;height:1.6px;background:var(--ink);transition:transform .3s}
.burger span::before{top:-5.5px}.burger span::after{top:5.5px}
.burger.on span{background:transparent}
.burger.on span::before{transform:translateY(5.5px) rotate(45deg)}
.burger.on span::after{transform:translateY(-5.5px) rotate(-45deg)}
/* ============ HERO ============ */
.hero{padding:150px 0 0;position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;top:-260px;right:-180px;width:820px;height:820px;border-radius:50%;
  background:radial-gradient(circle at 40% 40%,rgba(220,78,23,.14),rgba(220,78,23,0) 62%);pointer-events:none;
}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:end}
.hero h1{font-size:clamp(42px,6.4vw,80px);letter-spacing:-.045em;margin-bottom:26px}
.hero h1 em{font-style:normal;color:var(--signal);position:relative;white-space:nowrap}
.hero .lede{font-size:20px;max-width:46ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px;align-items:center}
.hero-note{display:flex;gap:9px;align-items:center;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-top:26px}
.dot{width:7px;height:7px;border-radius:50%;background:#3E9B5F;flex:none;box-shadow:0 0 0 3px rgba(62,155,95,.18)}
.hero-side{padding-bottom:8px}
.hero-side .k{font-family:var(--mono);font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px}
.hero-side p{font-size:16.5px;color:var(--ink-2);line-height:1.6;border-left:2px solid var(--signal);padding-left:18px}
.stage{
  margin-top:64px;border-radius:22px;position:relative;overflow:hidden;
  background:linear-gradient(168deg,#EFE8DC 0%,#E6DDCE 45%,#DCD1BE 100%);
  border:1px solid rgba(22,23,27,.09);box-shadow:var(--shadow-lg);
}
.stage::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 10%,rgba(255,255,255,.5),rgba(255,255,255,0) 55%),
             linear-gradient(to top,rgba(22,23,27,.13),rgba(22,23,27,0) 42%);
}
.stage svg{width:100%;height:auto;display:block}
.stage-tag{
  position:absolute;top:20px;left:22px;z-index:3;display:flex;gap:8px;flex-wrap:wrap;
}
.chip{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  background:rgba(246,242,235,.9);border:1px solid rgba(22,23,27,.12);color:var(--ink-2);
  padding:7px 12px;border-radius:100px;backdrop-filter:blur(6px);
}
.stage-cap{
  position:absolute;right:22px;bottom:20px;z-index:3;text-align:right;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:rgba(22,23,27,.62);
}
/* ============ MARQUEE / TRUST ============ */
.trust{border-block:1px solid var(--line);margin-top:96px;background:var(--paper-2)}
.trust-in{display:grid;grid-template-columns:repeat(4,1fr)}
.trust-i{padding:32px 26px;border-right:1px solid var(--line);text-align:left}
.trust-i:last-child{border-right:0}
.trust-i b{display:block;font-size:clamp(26px,3vw,36px);font-weight:680;letter-spacing:-.04em;line-height:1;margin-bottom:9px}
.trust-i span{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);line-height:1.5;display:block}
/* ============ CARRIES ============ */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px 28px 28px;
  display:flex;flex-direction:column;gap:16px;transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s;
}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.card .ic{width:46px;height:46px;border-radius:12px;background:var(--paper-2);display:grid;place-items:center;border:1px solid var(--line-2)}
.card .ic svg{width:23px;height:23px;stroke:var(--signal);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.card h3{font-size:20.5px;letter-spacing:-.025em}
.card p{font-size:15.5px;color:var(--ink-2);line-height:1.6}
.card dl{margin:6px 0 0;padding-top:16px;border-top:1px dashed var(--line);display:grid;gap:9px}
.card dl div{display:flex;justify-content:space-between;gap:14px;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase}
.card dl dt{color:var(--ink-3)}
.card dl dd{margin:0;color:var(--ink);font-weight:600;text-align:right}
/* ============ BUILD / SPECS ============ */
.build{background:var(--ink);color:var(--paper);border-radius:26px;overflow:hidden}
.build-in{display:grid;grid-template-columns:1fr 1.15fr;gap:0}
.build-l{padding:64px 52px;border-right:1px solid rgba(246,242,235,.11)}
.build-l .eyebrow{color:#F2A183}
.build-l .eyebrow::before{background:var(--signal)}
.build-l h2{font-size:clamp(30px,3.6vw,44px);color:#fff;margin-bottom:20px}
.build-l p{color:rgba(246,242,235,.66);font-size:16.5px;line-height:1.62}
.build-price{margin-top:34px;padding-top:26px;border-top:1px solid rgba(246,242,235,.14)}
.build-price .p{font-size:44px;font-weight:680;letter-spacing:-.04em;color:#fff;line-height:1}
.build-price .s{font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:rgba(246,242,235,.5);margin-top:10px}
.build-r{padding:56px 52px;background:rgba(246,242,235,.035)}
.spec{display:grid;grid-template-columns:34px 1fr auto;gap:18px;align-items:baseline;padding:17px 0;border-bottom:1px solid rgba(246,242,235,.1)}
.spec:last-child{border-bottom:0}
.spec .n{font-family:var(--mono);font-size:11px;color:rgba(246,242,235,.34);letter-spacing:.08em}
.spec .t{font-size:16px;color:#fff;font-weight:550;letter-spacing:-.015em}
.spec .t small{display:block;font-weight:400;font-size:14px;color:rgba(246,242,235,.5);margin-top:4px;letter-spacing:0;line-height:1.5}
.spec .v{font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:rgba(246,242,235,.62);text-align:right;max-width:230px}
/* ============ PROCESS ============ */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line)}
.step{padding:34px 30px 8px 0;border-right:1px solid var(--line);position:relative}
.step:last-child{border-right:0;padding-right:0}
.step::before{
  content:"";position:absolute;top:-1px;left:0;width:0;height:2px;background:var(--signal);
  transition:width .9s cubic-bezier(.22,1,.36,1);
}
.step.in::before{width:calc(100% - 30px)}
.step .sn{
  width:40px;height:40px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;
  font-family:var(--mono);font-size:12.5px;font-weight:600;color:var(--ink-2);margin-bottom:22px;
  transition:background .4s,color .4s,border-color .4s;
}
.step.in .sn{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.step h3{font-size:19.5px;margin-bottom:12px}
.step p{font-size:15px;color:var(--ink-2);line-height:1.62}
.step .wk{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--signal-dk);margin-top:16px}
/* ============ CONFIGURATOR ============ */
.cfg{background:var(--paper-2);border-block:1px solid var(--line)}
.cfg-grid{display:grid;grid-template-columns:1.25fr .85fr;gap:34px;align-items:start}
.cfg-panel{background:#fff;border:1px solid var(--line);border-radius:20px;padding:34px 32px;box-shadow:var(--shadow)}
.opt-g{padding:24px 0;border-bottom:1px dashed var(--line)}
.opt-g:first-child{padding-top:0}
.opt-g:last-of-type{border-bottom:0;padding-bottom:6px}
.opt-g > .lbl{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:15px}
.opt-g .lbl b{font-size:15.5px;font-weight:650;letter-spacing:-.02em}
.opt-g .lbl span{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.opts{display:flex;flex-wrap:wrap;gap:10px}
.opt{
  position:relative;border:1.5px solid var(--line);background:#fff;border-radius:11px;
  padding:12px 16px 12px 44px;cursor:pointer;text-align:left;transition:border-color .2s,background .2s,transform .2s;
  min-width:150px;flex:1 1 auto;
}
.opt:hover{border-color:rgba(22,23,27,.34);transform:translateY(-2px)}
.opt .sw{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:18px;height:18px;border-radius:50%;border:1.5px solid rgba(22,23,27,.2);overflow:hidden}
.opt .nm{display:block;font-size:14.5px;font-weight:600;letter-spacing:-.015em;line-height:1.25}
.opt .pr{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--ink-3);margin-top:4px;text-transform:uppercase}
.opt.on{border-color:var(--signal);background:rgba(220,78,23,.045)}
.opt.on .pr{color:var(--signal-dk)}
.opt input{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.opt:has(input:checked){border-color:var(--signal);background:rgba(220,78,23,.045)}
.opt:has(input:focus-visible){outline:2.5px solid var(--signal);outline-offset:2px}
.sum{background:var(--ink);color:var(--paper);border-radius:20px;padding:34px 32px;position:sticky;top:100px;box-shadow:var(--shadow-lg)}
.sum h3{font-size:13px;font-family:var(--mono);font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:rgba(246,242,235,.5);margin-bottom:26px}
.sum ul{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:12px}
.sum li{display:flex;justify-content:space-between;gap:14px;font-size:14.5px;color:rgba(246,242,235,.82);padding-bottom:12px;border-bottom:1px solid rgba(246,242,235,.1)}
.sum li span:last-child{font-family:var(--mono);font-size:12px;color:rgba(246,242,235,.6);white-space:nowrap}
.sum .total{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding-top:6px}
.sum .total .lab{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(246,242,235,.5)}
.sum .total .amt{font-size:46px;font-weight:680;letter-spacing:-.045em;color:#fff;line-height:1;font-variant-numeric:tabular-nums}
.sum .dep{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:rgba(246,242,235,.5);margin-top:8px;text-transform:uppercase}
.sum .btn{width:100%;margin-top:24px}
.sum .fine{font-size:12.5px;color:rgba(246,242,235,.45);line-height:1.55;margin-top:16px}
/* ============ OWNERSHIP ============ */
.own{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.own-i{border-top:2px solid var(--ink);padding-top:20px}
.own-i svg{width:26px;height:26px;stroke:var(--signal);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-bottom:16px}
.own-i h4{font-size:17.5px;margin-bottom:9px;letter-spacing:-.02em}
.own-i p{font-size:14.5px;color:var(--ink-2);line-height:1.6}
/* ============ QUOTE ============ */
.quote-sec{background:var(--moss);color:#F2EFE7;border-radius:26px;padding:74px 64px;position:relative;overflow:hidden}
.quote-sec::before{
  content:"";position:absolute;right:-90px;top:-90px;width:380px;height:380px;border-radius:50%;
  border:1px solid rgba(242,239,231,.16);
}
.quote-sec::after{
  content:"";position:absolute;right:-30px;bottom:-140px;width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle at 45% 45%,rgba(220,78,23,.4),rgba(220,78,23,0) 70%);
}
.quote-sec .eyebrow{color:#EBB69B}
.quote-sec .eyebrow::before{background:#EBB69B}
blockquote{margin:0;position:relative;z-index:2}
blockquote p{font-family:var(--serif);font-size:clamp(24px,3.4vw,38px);line-height:1.34;letter-spacing:-.02em;max-width:22ch;font-weight:400}
.q-mark{font-family:var(--serif);font-size:86px;line-height:.4;color:rgba(242,239,231,.3);display:block;margin-bottom:20px}
.q-by{display:flex;gap:16px;align-items:center;margin-top:36px;position:relative;z-index:2}
.q-av{width:48px;height:48px;border-radius:50%;background:rgba(242,239,231,.14);border:1px solid rgba(242,239,231,.3);display:grid;place-items:center;font-family:var(--mono);font-size:13px;letter-spacing:.05em;flex:none}
.q-by b{display:block;font-size:15.5px;font-weight:600;letter-spacing:-.015em}
.q-by span{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(242,239,231,.62);margin-top:5px;display:block}
/* ============ FAQ ============ */
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
.acc{border-top:1px solid var(--line)}
.acc-i{border-bottom:1px solid var(--line)}
.acc-b{
  width:100%;background:none;border:0;padding:26px 44px 26px 0;text-align:left;cursor:pointer;
  display:flex;justify-content:space-between;gap:24px;align-items:flex-start;position:relative;
  font-size:18px;font-weight:600;letter-spacing:-.022em;line-height:1.35;transition:color .2s;
}
.acc-b:hover{color:var(--signal)}
.acc-b .pm{position:absolute;right:0;top:29px;width:22px;height:22px;flex:none}
.acc-b .pm::before,.acc-b .pm::after{content:"";position:absolute;background:currentColor;transition:transform .35s cubic-bezier(.22,1,.36,1),opacity .3s}
.acc-b .pm::before{left:0;top:10px;width:22px;height:1.7px}
.acc-b .pm::after{left:10.2px;top:0;width:1.7px;height:22px}
.acc-i.open .acc-b{color:var(--signal)}
.acc-i.open .pm::after{transform:rotate(90deg);opacity:0}
.acc-p{max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.22,1,.36,1)}
.acc-p p{font-size:16px;color:var(--ink-2);line-height:1.68;padding:0 46px 28px 0;max-width:66ch}
.faq-aside{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);padding:32px 30px}
.faq-aside h3{font-size:21px;margin-bottom:12px}
.faq-aside p{font-size:15.5px;color:var(--ink-2);margin-bottom:22px;line-height:1.6}
/* ============ CONTACT ============ */
.contact{background:var(--ink);color:var(--paper)}
.contact .eyebrow{color:#F2A183}
.contact .eyebrow::before{background:var(--signal)}
.contact h2{color:#fff}
.contact .lede{color:rgba(246,242,235,.62)}
.c-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.form{display:grid;gap:18px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(246,242,235,.5);margin-bottom:9px}
.field input,.field textarea,.field select{
  width:100%;background:rgba(246,242,235,.05);border:1.5px solid rgba(246,242,235,.16);
  border-radius:10px;padding:14px 16px;font-size:15.5px;color:#fff;transition:border-color .2s,background .2s;
  -webkit-appearance:none;appearance:none;
}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23F6F2EB' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:42px}
.field textarea{min-height:118px;resize:vertical;font-family:inherit}
.field input::placeholder,.field textarea::placeholder{color:rgba(246,242,235,.34)}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--signal);background:rgba(246,242,235,.08)}
.field.err input,.field.err textarea{border-color:#E8664A}
.field .msg{display:none;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#F0917A;margin-top:7px}
.field.err .msg{display:block}
.form-ok{
  display:none;border:1.5px solid rgba(96,197,133,.5);background:rgba(96,197,133,.1);
  border-radius:12px;padding:18px 20px;font-size:15.5px;color:#B8EBCD;line-height:1.55;
}
.form-ok.on{display:block}
.c-info{display:grid;gap:26px}
.c-card{border:1px solid rgba(246,242,235,.14);border-radius:var(--r);padding:24px 26px;background:rgba(246,242,235,.035)}
.c-card h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:rgba(246,242,235,.5);font-weight:600;margin-bottom:14px}
.c-card p{font-size:16px;color:rgba(246,242,235,.9);line-height:1.62}
.c-card p + p{margin-top:8px}
.c-card a{color:#F2A183;text-decoration:none;border-bottom:1px solid rgba(242,161,133,.35);transition:border-color .2s}
.c-card a:hover{border-color:#F2A183}
.map{border-radius:12px;overflow:hidden;border:1px solid rgba(246,242,235,.14);margin-top:2px}
.map svg{width:100%;height:auto;display:block}
/* ============ FOOTER ============ */
.ft{background:var(--ink);color:rgba(246,242,235,.55);padding:0 0 44px;border-top:1px solid rgba(246,242,235,.12)}
.ft-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;padding:64px 0 52px}
.ft h5{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:rgba(246,242,235,.42);font-weight:600;margin:0 0 18px}
.ft ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.ft a{color:rgba(246,242,235,.72);text-decoration:none;font-size:15px;transition:color .2s}
.ft a:hover{color:var(--signal)}
.ft .brand-tx b{color:#fff}
.ft .brand-tx span{color:rgba(246,242,235,.45)}
.ft-blurb{font-size:15px;line-height:1.62;max-width:34ch;margin-top:20px}
.ft-bot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:26px;border-top:1px solid rgba(246,242,235,.12);font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
/* ============ REVEAL ============ */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}
[data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
  .step::before,.step.in::before{transition:none}
  .btn,.card,.opt{transition:none}
}
/* ============ RESPONSIVE ============ */
@media (max-width:1080px){
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .hero-side{padding-bottom:0}
  .build-in{grid-template-columns:1fr}
  .build-l{border-right:0;border-bottom:1px solid rgba(246,242,235,.11);padding:48px 36px}
  .build-r{padding:40px 36px}
  .cfg-grid{grid-template-columns:1fr}
  .sum{position:static}
  .faq-grid{grid-template-columns:1fr;gap:34px}
  .own{grid-template-columns:repeat(2,1fr);gap:26px}
  .steps{grid-template-columns:repeat(2,1fr)}
  .step{padding-right:26px}
  .step:nth-child(2){border-right:0}
  .ft-top{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .nav{
    position:fixed;inset:76px 0 auto;background:rgba(246,242,235,.97);backdrop-filter:blur(16px);
    flex-direction:column;align-items:flex-start;gap:0;padding:8px 26px 26px;
    border-bottom:1px solid var(--line);transform:translateY(-130%);transition:transform .42s cubic-bezier(.22,1,.36,1);
    box-shadow:var(--shadow);display:none;
  }
  .nav.open{display:flex;transform:none}
  .nav a{padding:16px 0;font-size:19px;width:100%;border-bottom:1px solid var(--line-2)}
  .nav a::after{display:none}
  .burger{display:flex}
  .hdr-cta .btn{display:none}
  .c-grid{grid-template-columns:1fr;gap:40px}
  .trust-in{grid-template-columns:1fr 1fr}
  .trust-i:nth-child(2){border-right:0}
  .trust-i:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .cards{grid-template-columns:1fr}
  .quote-sec{padding:52px 30px}
}
@media (max-width:620px){
  body{font-size:16px}
  .sec{padding:78px 0}
  .hero{padding-top:120px}
  .stage{margin-top:44px;border-radius:16px}
  .steps{grid-template-columns:1fr}
  .step{border-right:0;border-bottom:1px solid var(--line);padding:28px 0 26px}
  .step:last-child{border-bottom:0}
  .step.in::before{width:100%}
  .own{grid-template-columns:1fr}
  .f-row{grid-template-columns:1fr}
  .ft-top{grid-template-columns:1fr;gap:32px;padding:48px 0 36px}
  .cfg-panel,.sum,.build-l,.build-r{padding-inline:22px}
  .spec{grid-template-columns:28px 1fr;gap:12px}
  .spec .v{grid-column:2;text-align:left;max-width:none;margin-top:2px}
  .trust-in{grid-template-columns:1fr}
  .trust-i{border-right:0;border-bottom:1px solid var(--line)}
  .trust-i:last-child{border-bottom:0}
  .sum .total .amt{font-size:38px}
  .opt{min-width:100%}
}
</style>
<noscript><style>[data-reveal]{opacity:1;transform:none}</style></noscript>
</head>
<body>
<div class="grain" aria-hidden="true"></div>
<a class="skip" href="#main">Skip to content</a>

<!-- ============ HEADER ============ -->
<header class="hdr" id="hdr">
  <div class="wrap hdr-in">
    <a class="brand" href="#top" aria-label="Lumen Cycles home">
      <svg viewBox="0 0 40 40" aria-hidden="true">
        <circle cx="20" cy="20" r="18.2" fill="#16171B"/>
        <circle cx="20" cy="20" r="7.4" fill="none" stroke="#F6F2EB" stroke-width="2"/>
        <path d="M20 4.6V12.6M20 27.4v8M4.6 20h8M27.4 20h8" stroke="#DC4E17" stroke-width="2.2" stroke-linecap="round"/>
        <circle cx="20" cy="20" r="2.4" fill="#DC4E17"/>
      </svg>
      <span class="brand-tx"><b>Lumen Cycles</b><span>Copenhagen</span></span>
    </a>
    <nav class="nav" id="nav" aria-label="Primary">
      <a href="#build">The build</a>
      <a href="#process">Process</a>
      <a href="#configure">Configure</a>
      <a href="#ownership">Ownership</a>
      <a href="#faq">FAQ</a>
    </nav>
    <div class="hdr-cta">
      <a class="btn btn-primary" href="#contact">Book a fitting</a>
      <button class="burger" id="burger" aria-label="Menu" aria-expanded="false" aria-controls="nav"><span></span></button>
    </div>
  </div>
</header>

<main id="main">
<!-- ============ HERO ============ -->
<section class="hero" id="top">
  <div class="wrap">
    <div class="hero-grid">
      <div>
        <div class="eyebrow" data-reveal>Nørrebro, København — since 2019</div>
        <h1 data-reveal style="transition-delay:.06s">A cargo bike built around <em>the way you actually live.</em></h1>
        <p class="lede" data-reveal style="transition-delay:.12s">Two builders, one frame at a time. We measure your street, your load and both riders — then weld a bike to suit. Twelve weeks from first conversation to handover.</p>
        <div class="hero-actions" data-reveal style="transition-delay:.18s">
          <a class="btn btn-accent" href="#configure">Start your build <span class="ar">→</span></a>
          <a class="link-a" href="#build">See the standard build <span class="ar">→</span></a>
        </div>
        <div class="hero-note" data-reveal style="transition-delay:.24s"><span class="dot"></span> 3 build slots open for March</div>
      </div>
      <aside class="hero-side" data-reveal style="transition-delay:.2s">
        <div class="k">Why custom</div>
        <p>An off-the-shelf cargo bike fits an average family. You are not an average family — one of you is 158 cm, the other is 191 cm, and the bike has to be ridden by both, every morning, in the rain.</p>
      </aside>
    </div>

    <!-- Hero illustration -->
    <div class="stage" data-reveal style="transition-delay:.26s">
      <div class="stage-tag">
        <span class="chip">LM-1 · Long John</span>
        <span class="chip">Belt drive</span>
        <span class="chip">Signal Orange</span>
      </div>
      <svg viewBox="0 0 1200 640" role="img" aria-label="Side view illustration of a Lumen long-john cargo bike with a wooden front box">
        <defs>
          <linearGradient id="boxg" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stop-color="#D9A96E"/><stop offset="1" stop-color="#C08A4F"/>
          </linearGradient>
          <radialGradient id="shdw" cx="50%" cy="50%" r="50%">
            <stop offset="0" stop-color="#16171B" stop-opacity=".34"/><stop offset="1" stop-color="#16171B" stop-opacity="0"/>
          </radialGradient>
        </defs>

        <!-- ground shadow -->
        <ellipse cx="620" cy="556" rx="470" ry="26" fill="url(#shdw)"/>

        <!-- spokes: rear -->
        <g transform="translate(950,420)" stroke="#16171B" stroke-width="1.8" opacity=".45">
          <line x1="0" y1="-16" x2="0" y2="-104"/><line x1="0" y1="-16" x2="0" y2="-104" transform="rotate(30)"/>
          <line x1="0" y1="-16" x2="0" y2="-104" transform="rotate(60)"/><line x1="0" y1="-16" x2="0" y2="-104" transform="rotate(90)"/>
          <line x1="0" y1="-16" x2="0" y2="-104" transform="rotate(120)"/><line x1="0" y1="-16" x2="0" y2="-104" transform="rotate(150)"/>
          <line x1="0" y1="-16" x2="0" y2="-104" transform="rotate(180)"/><line x1="0" y1="-16" x2="0" y2="-104" transform="rotate(210)"/>
          <line x1="0" y1="-16" x2="0" y2="-104" transform="rotate(240)"/><line x1="0" y1="-16" x2="0" y2="-104" transform="rotate(270)"/>
          <line x1="0" y1="-16" x2="0" y2="-104" transform="rotate(300)"/><line x1="0" y1="-16" x2="0" y2="-104" transform="rotate(330)"/>
        </g>
        <!-- spokes: front -->
        <g transform="translate(215,455)" stroke="#16171B" stroke-width="1.6" opacity=".45">
          <line x1="0" y1="-14" x2="0" y2="-72"/><line x1="0" y1="-14" x2="0" y2="-72" transform="rotate(36)"/>
          <line x1="0" y1="-14" x2="0" y2="-72" transform="rotate(72)"/><line x1="0" y1="-14" x2="0" y2="-72" transform="rotate(108)"/>
          <line x1="0" y1="-14" x2="0" y2="-72" transform="rotate(144)"/><line x1="0" y1="-14" x2="0" y2="-72" transform="rotate(180)"/>
          <line x1="0" y1="-14" x2="0" y2="-72" transform="rotate(216)"/><line x1="0" y1="-14" x2="0" y2="-72" transform="rotate(252)"/>
          <line x1="0" y1="-14" x2="0" y2="-72" transform="rotate(288)"/><line x1="0" y1="-14" x2="0" y2="-72" transform="rotate(324)"/>
        </g>

        <!-- wheels -->
        <g fill="none">
          <circle cx="950" cy="420" r="120" stroke="#16171B" stroke-width="15"/>
          <circle cx="950" cy="420" r="105" stroke="#16171B" stroke-width="1.4" opacity=".35"/>
          <circle cx="215" cy="455" r="85" stroke="#16171B" stroke-width="13"/>
          <circle cx="215" cy="455" r="73" stroke="#16171B" stroke-width="1.4" opacity=".35"/>
        </g>
        <circle cx="950" cy="420" r="9" fill="#16171B"/>
        <circle cx="215" cy="455" r="7.5" fill="#16171B"/>

        <!-- chain -->
        <path d="M775 470 L950 420" stroke="#16171B" stroke-width="3.4" stroke-dasharray="7 5" opacity=".75"/>
        <circle cx="775" cy="470" r="19" fill="none" stroke="#16171B" stroke-width="5"/>
        <path d="M775 470 L812 505" stroke="#16171B" stroke-width="7" stroke-linecap="round"/>
        <rect x="806" y="499" width="30" height="11" rx="3" fill="#16171B"/>

        <!-- steering linkage -->
        <path d="M624 442 L252 400" stroke="#16171B" stroke-width="7" stroke-linecap="round"/>
        <path d="M252 400 L215 455" stroke="#16171B" stroke-width="10" stroke-linecap="round"/>

        <!-- frame -->
        <g fill="none" stroke="#16171B" stroke-linecap="round">
          <path d="M775 470 L628 444" stroke-width="12"/>
          <path d="M612 312 L630 452" stroke-width="13"/>
          <path d="M612 348 L860 288" stroke-width="11"/>
          <path d="M775 470 L864 256" stroke-width="12"/>
          <path d="M775 470 L950 420" stroke-width="11"/>
          <path d="M861 278 L950 420" stroke-width="10"/>
          <path d="M612 312 L864 256" stroke-width="6" opacity=".35"/>
        </g>

        <!-- front box -->
        <g>
          <path d="M262 268 h306 a12 12 0 0 1 12 12 v104 a12 12 0 0 1 -12 12 h-306 a12 12 0 0 1 -12 -12 v-104 a12 12 0 0 1 12 -12 z" fill="url(#boxg)" stroke="#8A5F2E" stroke-width="2.5"/>
          <path d="M250 292 h330" stroke="#8A5F2E" stroke-width="2" opacity=".55"/>
          <path d="M250 372 h330" stroke="#8A5F2E" stroke-width="2" opacity=".45"/>
          <path d="M330 268 v128 M420 268 v128 M510 268 v128" stroke="#8A5F2E" stroke-width="1.6" opacity=".38"/>
          <rect x="250" y="268" width="330" height="14" rx="7" fill="#E3B97F" opacity=".95"/>
          <path d="M262 396 h306" stroke="#5E3E1B" stroke-width="3.5" stroke-linecap="round" opacity=".6"/>
          <text x="415" y="352" text-anchor="middle" font-family="ui-monospace,Menlo,monospace" font-size="17" letter-spacing="4" fill="#7A5326" opacity=".85">LUMEN</text>
        </g>

        <!-- head tube cap + handlebar -->
        <path d="M606 312 h30" stroke="#DC4E17" stroke-width="9" stroke-linecap="round"/>
        <path d="M560 258 C588 258 606 268 616 288" fill="none" stroke="#16171B" stroke-width="11" stroke-linecap="round"/>
        <path d="M560 258 h-34" stroke="#16171B" stroke-width="13" stroke-linecap="round"/>
        <rect x="496" y="248" width="34" height="21" rx="9" fill="#DC4E17"/>

        <!-- saddle + seatpost -->
        <path d="M864 256 L884 214" stroke="#16171B" stroke-width="10" stroke-linecap="round"/>
        <path d="M856 208 q46 -20 92 -3 q-8 15 -30 16 q-40 2 -62 -13 z" fill="#16171B"/>

        <!-- rear rack -->
        <path d="M906 300 q56 -16 104 6" fill="none" stroke="#16171B" stroke-width="6" stroke-linecap="round" opacity=".85"/>
        <path d="M1010 306 L1004 372" stroke="#16171B" stroke-width="5" stroke-linecap="round" opacity=".7"/>

        <!-- light -->
        <rect x="232" y="384" width="26" height="17" rx="6" fill="#16171B"/>
        <circle cx="252" cy="392" r="5" fill="#F6D98A"/>

        <!-- ground -->
        <path d="M40 540 H1160" stroke="#16171B" stroke-width="2.5" opacity=".22" stroke-linecap="round"/>
        <path d="M120 566 H300 M360 566 H470 M540 566 H760 M830 566 H1010" stroke="#16171B" stroke-width="2.5" opacity=".12" stroke-linecap="round"/>
      </svg>
      <div class="stage-cap">LM-041 · delivered to Valby<br>12 kg of groceries, every day</div>
    </div>
  </div>

  <!-- trust strip -->
  <div class="trust">
    <div class="wrap">
      <div class="trust-in">
        <div class="trust-i" data-reveal><b>47</b><span>Bikes built<br>since 2019</span></div>
        <div class="trust-i" data-reveal style="transition-delay:.07s"><b>5 years</b><span>Frame warranty,<br>transferable</span></div>
        <div class="trust-i" data-reveal style="transition-delay:.14s"><b>12 weeks</b><span>Order to<br>handover</span></div>
        <div class="trust-i" data-reveal style="transition-delay:.21s"><b>2 people</b><span>Build every bike<br>start to finish</span></div>
      </div>
    </div>
  </div>
</section>

<!-- ============ CARRIES ============ -->
<section class="sec" id="carries">
  <div class="wrap">
    <div class="sec-head" data-reveal>
      <div class="eyebrow">What it carries</div>
      <h2>Built for the load you have, not the load in the brochure.</h2>
      <p class="lede">Every build starts with a list. We read it, weigh the heavy things, and set the geometry and drivetrain around your actual week.</p>
    </div>
    <div class="cards">
      <article class="card" data-reveal>
        <div class="ic"><svg viewBox="0 0 24 24"><path d="M3 8h18v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><path d="M3 8l3-5h12l3 5"/><path d="M9 12h6"/></svg></div>
        <h3>School run &amp; groceries</h3>
        <p>Two children up front, a week of shopping behind them, and still room for the library books. The box we build for this holds 80 kg and wipes clean with a damp cloth.</p>
        <dl>
          <div><dt>Box</dt><dd>600 × 450 mm</dd></div>
          <div><dt>Rated load</dt><dd>80 kg</dd></div>
          <div><dt>Typical build</dt><dd>€3,980</dd></div>
        </dl>
      </article>
      <article class="card" data-reveal style="transition-delay:.09s">
        <div class="ic"><svg viewBox="0 0 24 24"><path d="M14.7 6.3a4 4 0 0 1-5.4 5.4L4 17v3h3l5.3-5.3a4 4 0 0 1 5.4-5.4l-2.6 2.6-1.4-1.4z"/></svg></div>
        <h3>Tools, timber, tile</h3>
        <p>For trades: a low step-through frame, a steel-edged box that takes a stack of boards, and a belt drive that never asks for grease on your trousers before a client meeting.</p>
        <dl>
          <div><dt>Box</dt><dd>700 × 480 mm</dd></div>
          <div><dt>Rated load</dt><dd>110 kg</dd></div>
          <div><dt>Typical build</dt><dd>€4,460</dd></div>
        </dl>
      </article>
      <article class="card" data-reveal style="transition-delay:.18s">
        <div class="ic"><svg viewBox="0 0 24 24"><path d="M12 2v6M12 16v6M4.9 4.9l4.2 4.2M14.9 14.9l4.2 4.2M2 12h6M16 12h6M4.9 19.1l4.2-4.2M14.9 9.1l4.2-4.2"/></svg></div>
        <h3>Winter, rain, cobblestones</h3>
        <p>Copenhagen in February. Dynamo lighting that never needs charging, four-piston brakes for wet granite, and a riding position that keeps your jacket out of the chain.</p>
        <dl>
          <div><dt>Brakes</dt><dd>4-piston, 180 mm</dd></div>
          <div><dt>Lighting</dt><dd>Dynamo, always on</dd></div>
          <div><dt>Typical build</dt><dd>€4,240</dd></div>
        </dl>
      </article>
    </div>
  </div>
</section>

<!-- ============ BUILD / SPECS ============ -->
<section class="sec" id="build" style="padding-top:24px">
  <div class="wrap">
    <div class="build" data-reveal>
      <div class="build-in">
        <div class="build-l">
          <div class="eyebrow">The standard build</div>
          <h2>LM-1. The one we'd build for ourselves.</h2>
          <p>Most orders start here and then change by a part or two. Chromoly steel, TIG-welded in the workshop on Ravnsborggade, powder-coated in Valby, and assembled by the same two people who cut the tube.</p>
          <div class="build-price">
            <div class="p">€3,450</div>
            <div class="s">Base specification · incl. VAT · 12-week lead time</div>
          </div>
        </div>
        <div class="build-r">
          <div class="spec"><span class="n">01</span><span class="t">Frame<small>4130 chromoly, TIG-welded, heat-treated after welding. Cut to your inside-leg measurement.</small></span><span class="v">5 sizes</span></div>
          <div class="spec"><span class="n">02</span><span class="t">Box<small>18 mm marine birch ply, varnished edges, stainless fixings, drain holes in the floor.</small></span><span class="v">80 kg rated</span></div>
          <div class="spec"><span class="n">03</span><span class="t">Drivetrain<small>Gates Carbon belt with a continuously variable hub, or 8-speed chain. Sealed, quiet, no grease.</small></span><span class="v">Belt / chain</span></div>
          <div class="spec"><span class="n">04</span><span class="t">Brakes<small>Four-piston hydraulic front and rear, 180 mm rotors, finned pads for long descents.</small></span><span class="v">4-piston</span></div>
          <div class="spec"><span class="n">05</span><span class="t">Wheels<small>20-inch front, 26-inch rear, double-wall rims, 36 stainless spokes, hand-tensioned.</small></span><span class="v">36h</span></div>
          <div class="spec"><span class="n">06</span><span class="t">Lighting<small>Dynamo-driven head and tail light, wired through the frame. No batteries, no charging.</small></span><span class="v">Dynamo</span></div>
          <div class="spec"><span class="n">07</span><span class="t">Finish<small>Powder coat in five colours, hand-lettered frame number, your initials under the bottom bracket.</small></span><span class="v">5 colours</span></div>
          <div class="spec"><span class="n">08</span><span class="t">Weight<small>24 kg pedal-only, up to 31 kg with a mid-drive motor and a steel box.</small></span><span class="v">24–31 kg</span></div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ============ PROCESS ============ -->
<section class="sec" id="process" style="padding-top:64px">
  <div class="wrap">
    <div class="sec-head" data-reveal>
      <div class="eyebrow">Process</div>
      <h2>Four steps. Twelve weeks. No surprises.</h2>
      <p class="lede">You get a fixed price on day one and a build log with photographs every Friday until the bike is yours.</p>
    </div>
    <div class="steps">
      <div class="step" data-reveal>
        <div class="sn">01</div>
        <h3>Conversation</h3>
        <p>An hour at the workshop or on a call. Who rides, what you carry, where you park it, which hills you avoid. We write it down and price the build there and then.</p>
        <span class="wk">Week 0 · Free</span>
      </div>
      <div class="step" data-reveal style="transition-delay:.09s">
        <div class="sn">02</div>
        <h3>Fit &amp; geometry</h3>
        <p>Inside-leg, reach and shoulder width for both riders, plus a check of your doorways and bike-store dimensions. You sign off a drawing before any steel is cut.</p>
        <span class="wk">Week 1</span>
      </div>
      <div class="step" data-reveal style="transition-delay:.18s">
        <div class="sn">03</div>
        <h3>Fabrication</h3>
        <p>Coping, jigging, welding, powder coat, wheel build, assembly. Photographed and sent to you each Friday. You are welcome to come and watch any weekday.</p>
        <span class="wk">Weeks 2–10</span>
      </div>
      <div class="step" data-reveal style="transition-delay:.27s">
        <div class="sn">04</div>
        <h3>Handover</h3>
        <p>Ninety minutes together: setup, load test with your actual cargo, braking and belt tension. Then the first service is on us at six weeks.</p>
        <span class="wk">Week 12</span>
      </div>
    </div>
  </div>
</section>

<!-- ============ CONFIGURATOR ============ -->
<section class="sec cfg" id="configure">
  <div class="wrap">
    <div class="sec-head" data-reveal>
      <div class="eyebrow">Configure</div>
      <h2>Compose your build.</h2>
      <p class="lede">Choose the parts that matter to you. The price you see is the price you pay — delivery inside Denmark and the first two services are included.</p>
    </div>
    <div class="cfg-grid">
      <div class="cfg-panel" data-reveal>
        <form id="cfgForm">
          <div class="opt-g" data-group="drive">
            <div class="lbl"><b>Drivetrain</b><span>Step 1 of 4</span></div>
            <div class="opts">
              <label class="opt on">
                <input type="radio" name="drive" value="Belt · Carbon + hub" data-price="420" checked>
                <span class="sw" style="background:linear-gradient(135deg,#2B2D33,#4A4D55)"></span>
                <span class="nm">Carbon belt</span><span class="pr">+ €420 · silent, no grease</span>
              </label>
              <label class="opt">
                <input type="radio" name="drive" value="Chain · 8-speed" data-price="0">
                <span class="sw" style="background:linear-gradient(135deg,#9AA0A8,#C8CDD4)"></span>
                <span class="nm">8-speed chain</span><span class="pr">Included</span>
              </label>
            </div>
          </div>
          <div class="opt-g" data-group="motor">
            <div class="lbl"><b>Assist</b><span>Step 2 of 4</span></div>
            <div class="opts">
              <label class="opt on">
                <input type="radio" name="motor" value="Pedal only" data-price="0" checked>
                <span class="sw" style="background:linear-gradient(135deg,#F6F2EB,#DDD4C4)"></span>
                <span class="nm">Pedal only</span><span class="pr">Included · 24 kg</span>
              </label>
              <label class="opt">
                <input type="radio" name="motor" value="Hub assist" data-price="790">
                <span class="sw" style="background:linear-gradient(135deg,#3F5546,#5E7A67)"></span>
                <span class="nm">Hub assist</span><span class="pr">+ €790 · 60 km range</span>
              </label>
              <label class="opt">
                <input type="radio" name="motor" value="Mid-drive" data-price="1150">
                <span class="sw" style="background:linear-gradient(135deg,#DC4E17,#F07C40)"></span>
                <span class="nm">Mid-drive</span><span class="pr">+ €1,150 · 90 km range</span>
              </label>
            </div>
          </div>
          <div class="opt-g" data-group="box">
            <div class="lbl"><b>Box</b><span>Step 3 of 4</span></div>
            <div class="opts">
              <label class="opt on">
                <input type="radio" name="box" value="Marine birch" data-price="0" checked>
                <span class="sw" style="background:linear-gradient(135deg,#D9A96E,#C08A4F)"></span>
                <span class="nm">Marine birch</span><span class="pr">Included · 18 mm ply</span>
              </label>
              <label class="opt">
                <input type="radio" name="box" value="Oiled walnut" data-price="340">
                <span class="sw" style="background:linear-gradient(135deg,#6B4A2E,#8E6540)"></span>
                <span class="nm">Oiled walnut</span><span class="pr">+ €340 · solid</span>
              </label>
              <label class="opt">
                <input type="radio" name="box" value="Aluminium" data-price="610">
                <span class="sw" style="background:linear-gradient(135deg,#AEB4BC,#DDE1E6)"></span>
                <span class="nm">Aluminium</span><span class="pr">+ €610 · trade spec</span>
              </label>
            </div>
          </div>
          <div class="opt-g" data-group="paint">
            <div class="lbl"><b>Finish</b><span>Step 4 of 4</span></div>
            <div class="opts">
              <label class="opt on">
                <input type="radio" name="paint" value="Signal Orange" data-price="0" checked>
                <span class="sw" style="background:#DC4E17"></span>
                <span class="nm">Signal Orange</span><span class="pr">Included</span>
              </label>
              <label class="opt">
                <input type="radio" name="paint" value="Harbour Moss" data-price="0">
                <span class="sw" style="background:#3F5546"></span>
                <span class="nm">Harbour Moss</span><span class="pr">Included</span>
              </label>
              <label class="opt">
                <input type="radio" name="paint" value="Bone White" data-price="180">
                <span class="sw" style="background:#EFE9DC"></span>
                <span class="nm">Bone White</span><span class="pr">+ €180 · 3-coat</span>
              </label>
              <label class="opt">
                <input type="radio" name="paint" value="Raw Lacquer" data-price="240">
                <span class="sw" style="background:linear-gradient(135deg,#B9BEC6,#8C939C)"></span>
                <span class="nm">Raw Lacquer</span><span class="pr">+ €240 · welds visible</span>
              </label>
            </div>
          </div>
        </form>
      </div>

      <aside class="sum" data-reveal style="transition-delay:.1s">
        <h3>Your build summary</h3>
        <ul id="sumList">
          <li><span>Frame &amp; base specification</span><span>€3,450</span></li>
        </ul>
        <div class="total">
          <div>
            <div class="lab">Estimated total</div>
            <div class="amt" id="total">€3,870</div>
            <div class="dep">Deposit €500 · balance at handover</div>
          </div>
        </div>
        <a class="btn btn-accent" href="#contact">Reserve this build <span class="ar">→</span></a>
        <p class="fine">Indicative pricing. Final quote is confirmed after the fitting conversation and includes delivery anywhere in Denmark, VAT, and your first two services.</p>
      </aside>
    </div>
  </div>
</section>

<!-- ============ OWNERSHIP ============ -->
<section class="sec" id="ownership">
  <div class="wrap">
    <div class="sec-head" data-reveal>
      <div class="eyebrow">Ownership</div>
      <h2>What €4,000 actually buys you.</h2>
      <p class="lede">A bike is only as good as the five years after you ride it away. Here is everything that comes with the frame number stamped on yours.</p>
    </div>
    <div class="own">
      <div class="own-i" data-reveal>
        <svg viewBox="0 0 24 24"><path d="M12 2l8 3.5v6c0 5-3.4 9.3-8 10.5C7.4 20.8 4 16.5 4 11.5v-6z"/><path d="M9 12l2 2 4-4"/></svg>
        <h4>Five-year frame warranty</h4>
        <p>Covers cracks and weld failure, and transfers if you sell the bike. We have never refused a claim.</p>
      </div>
      <div class="own-i" data-reveal style="transition-delay:.08s">
        <svg viewBox="0 0 24 24"><path d="M14.7 6.3a4 4 0 0 1-5.4 5.4L4 17v3h3l5.3-5.3a4 4 0 0 1 5.4-5.4l-2.6 2.6-1.4-1.4z"/></svg>
        <h4>Two services on us</h4>
        <p>At six weeks and at one year: belt tension, brake bleed, spoke check, box re-varnish if it needs it.</p>
      </div>
      <div class="own-i" data-reveal style="transition-delay:.16s">
        <svg viewBox="0 0 24 24"><rect x="3" y="6" width="13" height="11" rx="2"/><path d="M16 10h3l2 3v4h-5z"/><circle cx="7" cy="19" r="2"/><circle cx="17.5" cy="19" r="2"/></svg>
        <h4>Loaner while we work</h4>
        <p>Any repair over a day and you take a workshop bike home. Booked in the same online calendar.</p>
      </div>
      <div class="own-i" data-reveal style="transition-delay:.24s">
        <svg viewBox="0 0 24 24"><path d="M20 12a8 8 0 1 1-2.3-5.7"/><path d="M20 4v5h-5"/></svg>
        <h4>Parts at cost, forever</h4>
        <p>We keep every part we have ever fitted in stock. After year two you pay our invoice price, no margin.</p>
      </div>
    </div>
  </div>
</section>

<!-- ============ QUOTE ============ -->
<section class="sec" style="padding-top:0">
  <div class="wrap">
    <div class="quote-sec" data-reveal>
      <div class="eyebrow">Owner, LM-019</div>
      <blockquote>
        <span class="q-mark" aria-hidden="true">“</span>
        <p>We test-rode six off-the-shelf bikes. None of them fit both of us. Lumen built one that does — and it has carried two winters of nursery runs without a single rattle.</p>
        <div class="q-by">
          <div class="q-av">MH</div>
          <div><b>Mette &amp; Jonas H.</b><span>Frederiksberg · delivered March 2024</span></div>
        </div>
      </blockquote>
    </div>
  </div>
</section>

<!-- ============ FAQ ============ -->
<section class="sec" id="faq" style="padding-top:34px">
  <div class="wrap">
    <div class="faq-grid">
      <div data-reveal>
        <div class="eyebrow">Questions</div>
        <h2 style="font-size:clamp(30px,3.8vw,44px);margin-bottom:24px">Before you write to us.</h2>
        <div class="faq-aside">
          <h3>Still unsure?</h3>
          <p>Come and see a bike being built. We put the kettle on most weekday afternoons and there is always something clamped in the jig.</p>
          <a class="btn btn-ghost" href="#contact">Book a workshop visit <span class="ar">→</span></a>
        </div>
      </div>
      <div class="acc" data-reveal style="transition-delay:.1s">
        <div class="acc-i">
          <button class="acc-b" aria-expanded="false">How long does a build really take?<span class="pm" aria-hidden="true"></span></button>
          <div class="acc-p"><p>Twelve weeks from the day you approve the drawing, and we hold that date in writing. Powder coating is the only part we do not control — it is done by a small shop in Valby we have used since the beginning, and if they slip, we tell you the same day they tell us.</p></div>
        </div>
        <div class="acc-i">
          <button class="acc-b" aria-expanded="false">Can I test ride before I order?<span class="pm" aria-hidden="true"></span></button>
          <div class="acc-p"><p>Yes. We keep two demo bikes, one pedal-only and one with mid-drive, and you can borrow either for a weekend inside Copenhagen for €60 — deducted from your order if you go ahead. Bring the kids, bring the cargo, take it up the hill you were worried about.</p></div>
        </div>
        <div class="acc-i">
          <button class="acc-b" aria-expanded="false">Do you ship outside Denmark?<span class="pm" aria-hidden="true"></span></button>
          <div class="acc-p"><p>We deliver anywhere in Denmark included in the price, and to the rest of the EU for a flat €280 by courier, fully assembled in a bike crate. We do not ship to the UK or Norway — customs paperwork on a motor-assisted bicycle is not worth either of our time. Sweden and Germany are common and straightforward.</p></div>
        </div>
        <div class="acc-i">
          <button class="acc-b" aria-expanded="false">What if I need it serviced and I'm busy?<span class="pm" aria-hidden="true"></span></button>
          <div class="acc-p"><p>Book a slot in the same calendar you used to order. Drop-off is at 09:00, and most jobs are finished the same afternoon. Anything longer than a day and you ride home on the loaner. Your first two services are free; after that we charge time at cost.</p></div>
        </div>
        <div class="acc-i">
          <button class="acc-b" aria-expanded="false">Can two adults share one bike?<span class="pm" aria-hidden="true"></span></button>
          <div class="acc-p"><p>That is the most common reason people come to us. We set the saddle height to a comfortable mid-point between the two of you, shorten the stem a touch, and fit a quick-release post so either of you can dial it in at a set of lights in four seconds. Tell us both measurements at the fitting.</p></div>
        </div>
        <div class="acc-i">
          <button class="acc-b" aria-expanded="false">What happens to my deposit if I change my mind?<span class="pm" aria-hidden="true"></span></button>
          <div class="acc-p"><p>The €500 deposit is refundable in full until we cut steel — typically about two weeks after the fitting. After that it covers the tube and the powder-coat booking, so it is non-refundable but transferable to another build within twelve months.</p></div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ============ CONTACT ============ -->
<section class="sec contact" id="contact">
  <div class="wrap">
    <div class="sec-head" data-reveal>
      <div class="eyebrow">Start a build</div>
      <h2>Tell us what you carry.</h2>
      <p class="lede">Write a few lines about your week. We reply within two working days with a rough price, a slot, and an invitation to come and sit on a bike.</p>
    </div>
    <div class="c-grid">
      <form class="form" id="contactForm" novalidate data-reveal>
        <div class="form-ok" id="formOk">Thank you — your enquiry is with the workshop. We reply to everything within two working days, usually the same afternoon.</div>
        <div class="f-row">
          <div class="field" id="f-name">
            <label for="name">Your name</label>
            <input id="name" name="name" type="text" placeholder="Mette Hansen" autocomplete="name">
            <span class="msg">Please tell us your name</span>
          </div>
          <div class="field" id="f-email">
            <label for="email">Email</label>
            <input id="email" name="email" type="email" placeholder="you@example.dk" autocomplete="email">
            <span class="msg">Please enter a valid email</span>
          </div>
        </div>
        <div class="f-row">
          <div class="field" id="f-city">
            <label for="city">Where you'll ride it</label>
            <input id="city" name="city" type="text" placeholder="Frederiksberg" autocomplete="address-level2">
            <span class="msg">City or postcode</span>
          </div>
          <div class="field">
            <label for="when">Ideal handover</label>
            <select id="when" name="when">
              <option>March 2026 — 3 slots</option>
              <option>April 2026</option>
              <option>May 2026</option>
              <option>June 2026</option>
              <option>Not sure yet</option>
            </select>
          </div>
        </div>
        <div class="field" id="f-msg">
          <label for="msg">What do you carry?</label>
          <textarea id="msg" name="msg" placeholder="Two children, 191 cm and 158 cm, a week of groceries, and I park it in a basement with a 78 cm door…"></textarea>
          <span class="msg">A sentence or two is plenty</span>
        </div>
        <button class="btn btn-accent" type="submit" style="justify-self:start">Send enquiry <span class="ar">→</span></button>
      </form>

      <div class="c-info" data-reveal style="transition-delay:.1s">
        <div class="c-card">
          <h4>The workshop</h4>
          <p>Ravnsborggade 12, 2200 København N<br>Denmark</p>
          <p style="margin-top:14px">Tue–Fri 10:00–17:00, by appointment<br>Saturday fittings once a month</p>
        </div>
        <div class="c-card">
          <h4>Direct</h4>
          <p><a href="mailto:build@lumencycles.dk">build@lumencycles.dk</a></p>
          <p><a href="tel:+4531440812">+45 31 44 08 12</a></p>
        </div>
        <div class="map">
          <svg viewBox="0 0 620 300" role="img" aria-label="Stylised map showing the Lumen Cycles workshop on Ravnsborggade in Nørrebro, Copenhagen">
            <rect width="620" height="300" fill="#EDE6DA"/>
            <g fill="#E1D8C7">
              <rect x="24" y="24" width="132" height="86" rx="6"/><rect x="176" y="24" width="98" height="86" rx="6"/>
              <rect x="294" y="24" width="150" height="60" rx="6"/><rect x="464" y="24" width="132" height="86" rx="6"/>
              <rect x="24" y="132" width="132" height="66" rx="6"/><rect x="176" y="132" width="98" height="66" rx="6"/>
              <rect x="464" y="132" width="132" height="66" rx="6"/>
              <rect x="24" y="220" width="200" height="58" rx="6"/><rect x="244" y="220" width="150" height="58" rx="6"/>
              <rect x="414" y="220" width="182" height="58" rx="6"/>
            </g>
            <g stroke="#F6F2EB" stroke-width="14" stroke-linecap="round">
              <path d="M0 118 H620"/><path d="M0 210 H620"/><path d="M164 0 V300"/><path d="M452 0 V300"/>
            </g>
            <g stroke="#D8CEBC" stroke-width="1.6" stroke-dasharray="7 8">
              <path d="M0 118 H620"/><path d="M0 210 H620"/><path d="M164 0 V300"/><path d="M452 0 V300"/>
            </g>
            <path d="M40 268 C120 268 140 210 220 210 S340 118 430 118" fill="none" stroke="#DC4E17" stroke-width="4.5" stroke-linecap="round" stroke-dasharray="1 12" opacity=".9"/>
            <g>
              <circle cx="430" cy="118" r="26" fill="#DC4E17" opacity=".16"/>
              <path d="M430 92 a17 17 0 0 1 17 17 c0 13-17 32-17 32 s-17-19-17-32 a17 17 0 0 1 17-17z" fill="#16171B"/>
              <circle cx="430" cy="109" r="6" fill="#F6F2EB"/>
            </g>
            <rect x="352" y="140" width="156" height="30" rx="15" fill="#16171B"/>
            <text x="430" y="160" text-anchor="middle" font-family="ui-monospace,Menlo,monospace" font-size="12" letter-spacing="1.6" fill="#F6F2EB">RAVNSBORGGADE 12</text>
            <text x="34" y="112" font-family="ui-monospace,Menlo,monospace" font-size="11" letter-spacing="2" fill="#8A8378">NØRREBRO</text>
          </svg>
        </div>
      </div>
    </div>
  </div>
</section>
</main>

<!-- ============ FOOTER ============ -->
<footer class="ft">
  <div class="wrap">
    <div class="ft-top">
      <div>
        <a class="brand" href="#top" aria-label="Lumen Cycles home">
          <svg viewBox="0 0 40 40" aria-hidden="true">
            <circle cx="20" cy="20" r="18.2" fill="#F6F2EB"/>
            <circle cx="20" cy="20" r="7.4" fill="none" stroke="#16171B" stroke-width="2"/>
            <path d="M20 4.6V12.6M20 27.4v8M4.6 20h8M27.4 20h8" stroke="#DC4E17" stroke-width="2.2" stroke-linecap="round"/>
            <circle cx="20" cy="20" r="2.4" fill="#DC4E17"/>
          </svg>
          <span class="brand-tx"><b>Lumen Cycles</b><span>Copenhagen</span></span>
        </a>
        <p class="ft-blurb">A two-person workshop building custom cargo bikes in Nørrebro since 2019.</p>
      </div>
      <div>
        <h5>Build</h5>
        <ul>
          <li><a href="#build">Standard build</a></li>
          <li><a href="#configure">Configure</a></li>
          <li><a href="#process">Process</a></li>
          <li><a href="#ownership">Warranty</a></li>
        </ul>
      </div>
      <div>
        <h5>Workshop</h5>
        <ul>
          <li><a href="#faq">FAQ</a></li>
          <li><a href="#contact">Book a fitting</a></li>
          <li><a href="mailto:build@lumencycles.dk">build@lumencycles.dk</a></li>
          <li><a href="tel:+4531440812">+45 31 44 08 12</a></li>
        </ul>
      </div>
      <div>
        <h5>Visit</h5>
        <ul>
          <li>Ravnsborggade 12</li>
          <li>2200 København N</li>
          <li>Tue–Fri, 10–17</li>
          <li>By appointment</li>
        </ul>
      </div>
    </div>
    <div class="ft-bot">
      <span>© 2026 Lumen Cycles ApS</span>
      <span>CVR 41 08 66 23</span>
      <span>Made in Copenhagen</span>
    </div>
  </div>
</footer>

<script>
(function(){
  "use strict";
  var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;

  /* ---- header state ---- */
  var hdr = document.getElementById('hdr');
  function onScroll(){
    if (window.scrollY > 12) hdr.classList.add('scrolled'); else hdr.classList.remove('scrolled');
  }
  onScroll();
  window.addEventListener('scroll', onScroll, {passive:true});

  /* ---- mobile nav ---- */
  var burger = document.getElementById('burger'), nav = document.getElementById('nav');
  burger.addEventListener('click', function(){
    var open = nav.classList.toggle('open');
    burger.classList.toggle('on', open);
    burger.setAttribute('aria-expanded', open ? 'true' : 'false');
  });
  nav.addEventListener('click', function(e){
    if (e.target.tagName === 'A'){
      nav.classList.remove('open'); burger.classList.remove('on');
      burger.setAttribute('aria-expanded','false');
    }
  });

  /* ---- reveal on scroll ---- */
  var revealables = document.querySelectorAll('[data-reveal], .step');
  if ('IntersectionObserver' in window && !reduce){
    var io = new IntersectionObserver(function(entries){
      entries.forEach(function(en){
        if (en.isIntersecting){ en.target.classList.add('in'); io.unobserve(en.target); }
      });
    }, {rootMargin:'0px 0px -8% 0px', threshold:0.12});
    revealables.forEach(function(el){ io.observe(el); });
  } else {
    revealables.forEach(function(el){ el.classList.add('in'); });
  }

  /* ---- accordion ---- */
  var items = document.querySelectorAll('.acc-i');
  items.forEach(function(item){
    var btn = item.querySelector('.acc-b'), pane = item.querySelector('.acc-p');
    btn.addEventListener('click', function(){
      var isOpen = item.classList.contains('open');
      items.forEach(function(other){
        if (other !== item){
          other.classList.remove('open');
          other.querySelector('.acc-b').setAttribute('aria-expanded','false');
          other.querySelector('.acc-p').style.maxHeight = null;
        }
      });
      if (isOpen){
        item.classList.remove('open');
        btn.setAttribute('aria-expanded','false');
        pane.style.maxHeight = null;
      } else {
        item.classList.add('open');
        btn.setAttribute('aria-expanded','true');
        pane.style.maxHeight = pane.scrollHeight + 'px';
      }
    });
  });
  window.addEventListener('resize', function(){
    var open = document.querySelector('.acc-i.open .acc-p');
    if (open) open.style.maxHeight = open.scrollHeight + 'px';
  });

  /* ---- configurator ---- */
  var BASE = 3450, BASE_LABEL = 'Frame & base specification';
  var form = document.getElementById('cfgForm');
  var list = document.getElementById('sumList');
  var totalEl = document.getElementById('total');
  var LABELS = {drive:'Drivetrain', motor:'Assist', box:'Box', paint:'Finish'};

  function eur(n){ return '€' + n.toLocaleString('en-US'); }

  function syncOptions(){
    form.querySelectorAll('.opt').forEach(function(lab){
      var input = lab.querySelector('input');
      lab.classList.toggle('on', !!(input && input.checked));
    });
  }

  function render(){
    var rows = [{name:BASE_LABEL, price:BASE}];
    Object.keys(LABELS).forEach(function(g){
      var sel = form.querySelector('input[name="' + g + '"]:checked');
      if (!sel) return;
      var p = parseInt(sel.getAttribute('data-price'), 10) || 0;
      rows.push({name: LABELS[g] + ' · ' + sel.value, price: p});
    });
    var total = 0;
    list.innerHTML = rows.map(function(r){
      total += r.price;
      return '<li><span>' + r.name + '</span><span>' + (r.price === 0 && r.name !== BASE_LABEL ? 'Included' : eur(r.price)) + '</span></li>';
    }).join('');
    totalEl.textContent = eur(total);
    syncOptions();
  }

  form.addEventListener('change', render);
  render();

  /* ---- contact form ---- */
  var cform = document.getElementById('contactForm');
  var ok = document.getElementById('formOk');
  function setErr(id, bad){
    var f = document.getElementById(id);
    if (f) f.classList.toggle('err', bad);
    return !bad;
  }
  cform.addEventListener('submit', function(e){
    e.preventDefault();
    var name = document.getElementById('name').value.trim();
    var email = document.getElementById('email').value.trim();
    var city = document.getElementById('city').value.trim();
    var msg = document.getElementById('msg').value.trim();
    var valid = true;
    valid = setErr('f-name', name.length < 2) && valid;
    valid = setErr('f-email', !/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(email)) && valid;
    valid = setErr('f-city', city.length < 2) && valid;
    valid = setErr('f-msg', msg.length < 8) && valid;
    if (!valid){
      var first = cform.querySelector('.field.err input, .field.err textarea');
      if (first) first.focus();
      ok.classList.remove('on');
      return;
    }
    ok.classList.add('on');
    cform.reset();
    cform.querySelectorAll('.field').forEach(function(f){ f.classList.remove('err'); });
    ok.scrollIntoView({behavior: reduce ? 'auto' : 'smooth', block:'center'});
  });
  ['name','email','city','msg'].forEach(function(id){
    var el = document.getElementById(id);
    el.addEventListener('input', function(){
      var f = el.closest('.field');
      if (f) f.classList.remove('err');
    });
  });
})();
</script>
</body>
</html>

Compare with

MiMo v2.6 Flash: other attempts

  • MiMo v2.6 Flash, Watch: No file after 2 runs, used all 32,000 output tokens
  • About · 144 words