hypeorcode
Network offOpen alone (new tab)

Run details

Model
anthropic/claude-haiku-5.5
Route
OpenRouter API, one user message
Reasoning
provider default, 1,157 reasoning tokens
Limits
60 min · 128,000 output tokens
Date
21 Oct 2026
Time
80 s
Size
47 kB
Tokens
141 in, 21,593 out
List price
$0.011 ($0.1 in / $0.5 out per M)
Paid
$0.011

Raw files: output · meta.json

Exact prompt

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

It must be one complete, self-contained HTML file: inline all CSS and JavaScript, and make no network requests of any kind (no CDNs, web fonts or remote images). Reply with the file in a single ```html code block.

Source

47 kB 1,020 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 to Order in Copenhagen</title>
<meta name="description" content="Lumen Cycles builds custom cargo bikes to order in our Nørrebro workshop in Copenhagen. Fitted to your family, your route and your loads.">
<style>
  :root {
    --paper: #F4F1EA;
    --paper-deep: #EAE5DA;
    --ink: #1B2321;
    --ink-soft: #4A5552;
    --line: #D4CEC0;
    --green: #2F4A3E;
    --green-deep: #203329;
    --amber: #D9952B;
    --amber-soft: #F3DFB7;
    --white: #FFFFFF;
    --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --radius: 6px;
    --maxw: 1180px;
  }

  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
  body {
    margin: 0;
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.6;
    color: var(--ink);
    background: var(--paper);
  }
  img, svg { display: block; max-width: 100%; }
  a { color: inherit; }
  h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.15; margin: 0 0 .5em; letter-spacing: -0.01em; }
  h1 { font-size: clamp(2.4rem, 5.5vw, 4.1rem); }
  h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
  h3 { font-size: 1.3rem; }
  p { margin: 0 0 1em; }
  .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
  section { padding: clamp(64px, 9vw, 112px) 0; }
  .eyebrow {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--green);
    font-weight: 600;
    margin-bottom: 14px;
    display: inline-block;
  }
  .lead { font-size: 1.15rem; color: var(--ink-soft); max-width: 620px; }

  /* Buttons */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 14px 24px; border-radius: var(--radius);
    font: inherit; font-weight: 600; font-size: 0.97rem;
    text-decoration: none; border: 1.5px solid transparent; cursor: pointer;
    transition: background .2s, color .2s, border-color .2s, transform .1s;
  }
  .btn:active { transform: translateY(1px); }
  .btn-primary { background: var(--green); color: var(--paper); }
  .btn-primary:hover { background: var(--green-deep); }
  .btn-ghost { border-color: var(--ink); color: var(--ink); background: transparent; }
  .btn-ghost:hover { background: var(--ink); color: var(--paper); }
  .btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
    outline: 3px solid var(--amber); outline-offset: 2px;
  }

  /* Header */
  header.site {
    position: sticky; top: 0; z-index: 50;
    background: rgba(244,241,234,0.92);
    backdrop-filter: saturate(1.2) blur(8px);
    border-bottom: 1px solid var(--line);
  }
  .nav {
    display: flex; align-items: center; justify-content: space-between;
    height: 72px;
  }
  .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
  .brand-name { font-family: var(--serif); font-size: 1.35rem; font-weight: 600; letter-spacing: 0.02em; }
  .brand-name span { color: var(--amber); }
  .nav-links { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; }
  .nav-links a { text-decoration: none; font-size: 0.95rem; color: var(--ink-soft); }
  .nav-links a:hover { color: var(--ink); }
  .nav-cta { display: flex; align-items: center; gap: 16px; }
  .nav-cta .btn { padding: 10px 18px; font-size: 0.9rem; }
  .menu-toggle {
    display: none; background: none; border: 0; padding: 8px; cursor: pointer; color: var(--ink);
  }
  .menu-toggle svg { width: 24px; height: 24px; }

  /* Hero */
  .hero { padding: clamp(48px, 7vw, 96px) 0 clamp(64px, 8vw, 104px); }
  .hero-grid {
    display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center;
  }
  .hero h1 em { font-style: italic; color: var(--green); }
  .hero .lead { margin-bottom: 32px; }
  .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 40px; }
  .hero-meta {
    display: flex; flex-wrap: wrap; gap: 28px;
    padding-top: 24px; border-top: 1px solid var(--line);
    font-size: 0.9rem; color: var(--ink-soft);
  }
  .hero-meta strong { display: block; font-family: var(--serif); font-size: 1.6rem; color: var(--ink); font-weight: 500; line-height: 1.1; }
  .hero-art {
    background: var(--paper-deep);
    border-radius: 14px;
    padding: 28px;
    position: relative;
  }
  .hero-art svg { width: 100%; height: auto; }
  .hero-caption {
    position: absolute; left: 24px; bottom: 20px;
    font-size: 0.8rem; color: var(--ink-soft); letter-spacing: 0.02em;
  }
  .hero-tag {
    position: absolute; right: 20px; top: 20px;
    background: var(--white); border-radius: 999px; padding: 6px 14px;
    font-size: 0.8rem; font-weight: 600; color: var(--green);
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
  }

  /* Trust bar */
  .trust { background: var(--green); color: var(--paper); padding: 26px 0; }
  .trust-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: left;
  }
  .trust-item { font-size: 0.92rem; line-height: 1.4; opacity: .92; }
  .trust-item strong { display: block; font-size: 1rem; font-weight: 600; margin-bottom: 2px; color: var(--amber-soft); }

  /* Process */
  .steps {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
    margin-top: 56px; border-top: 1px solid var(--ink);
    counter-reset: step; list-style: none; padding: 0;
  }
  .step { padding: 28px 24px 0 0; position: relative; }
  .step::before {
    counter-increment: step;
    content: "0" counter(step);
    display: block; font-family: var(--serif); font-size: 0.95rem;
    color: var(--amber); font-weight: 600; margin-bottom: 14px;
  }
  .step h3 { font-size: 1.2rem; }
  .step p { font-size: 0.95rem; color: var(--ink-soft); margin: 0; }

  /* Configurator */
  .configurator { background: var(--white); }
  .config-grid {
    display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; margin-top: 48px; align-items: start;
  }
  fieldset {
    border: 0; margin: 0 0 32px; padding: 0;
  }
  legend {
    font-family: var(--serif); font-size: 1.2rem; font-weight: 500;
    padding: 0; margin-bottom: 14px; display: block;
  }
  legend small { font-family: var(--sans); font-size: 0.85rem; color: var(--ink-soft); font-weight: 400; margin-left: 8px; }
  .options { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
  .option input { position: absolute; opacity: 0; pointer-events: none; }
  .option {
    position: relative;
    display: flex; flex-direction: column; gap: 4px;
    padding: 14px 16px; border: 1.5px solid var(--line); border-radius: var(--radius);
    cursor: pointer; background: var(--white);
    transition: border-color .15s, background .15s;
  }
  .option:hover { border-color: var(--ink-soft); }
  .option .o-name { font-weight: 600; font-size: 0.95rem; }
  .option .o-desc { font-size: 0.82rem; color: var(--ink-soft); line-height: 1.35; }
  .option .o-price { font-size: 0.85rem; color: var(--green); font-weight: 600; margin-top: auto; padding-top: 6px; }
  .option input:checked ~ .o-name { color: var(--green-deep); }
  .option:has(input:checked) { border-color: var(--green); background: #F3F7F4; box-shadow: inset 0 0 0 1px var(--green); }
  .option:has(input:focus-visible) { outline: 3px solid var(--amber); outline-offset: 2px; }

  .summary {
    position: sticky; top: 96px;
    background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 32px;
  }
  .summary h3 { font-size: 1.5rem; margin-bottom: 4px; }
  .summary .sub { font-size: 0.9rem; color: var(--ink-soft); margin-bottom: 20px; }
  .summary ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
  .summary li {
    display: flex; justify-content: space-between; gap: 12px;
    padding: 11px 0; border-bottom: 1px dashed var(--line); font-size: 0.93rem;
  }
  .summary li span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
  .total {
    display: flex; justify-content: space-between; align-items: baseline;
    margin: 20px 0 6px; font-family: var(--serif);
  }
  .total .label { font-size: 1.05rem; }
  .total .value { font-size: 2.2rem; font-weight: 500; font-variant-numeric: tabular-nums; }
  .summary .note { font-size: 0.85rem; color: var(--ink-soft); margin-bottom: 22px; }
  .lead-time {
    display: flex; gap: 10px; align-items: flex-start;
    background: var(--amber-soft); border-radius: var(--radius); padding: 12px 14px;
    font-size: 0.88rem; margin-bottom: 22px;
  }
  .lead-time svg { flex: 0 0 18px; margin-top: 2px; }
  .summary .btn { width: 100%; }

  /* Craft */
  .craft-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
  }
  .craft-visual { background: var(--green); border-radius: 14px; padding: 36px; color: var(--paper); }
  .craft-visual svg { width: 100%; height: auto; }
  .spec-list { margin-top: 36px; display: grid; gap: 0; }
  .spec {
    display: grid; grid-template-columns: 150px 1fr; gap: 16px;
    padding: 18px 0; border-top: 1px solid var(--line);
  }
  .spec:last-child { border-bottom: 1px solid var(--line); }
  .spec dt { font-weight: 600; font-size: 0.95rem; }
  .spec dd { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }

  /* Pricing transparency */
  .pricing { background: var(--paper-deep); }
  .price-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }
  .price-card {
    background: var(--white); border-radius: 12px; padding: 32px 28px;
    border: 1px solid var(--line); display: flex; flex-direction: column;
  }
  .price-card.featured { border: 2px solid var(--green); }
  .price-card .tier { font-size: 0.8rem; text-transform: uppercase; letter-spacing: .14em; color: var(--green); font-weight: 600; }
  .price-card .amount { font-family: var(--serif); font-size: 2.6rem; margin: 10px 0 4px; font-variant-numeric: tabular-nums; }
  .price-card .amount small { font-size: 0.95rem; font-family: var(--sans); color: var(--ink-soft); font-weight: 400; }
  .price-card p.desc { font-size: 0.93rem; color: var(--ink-soft); }
  .price-card ul { list-style: none; padding: 0; margin: 16px 0 24px; flex: 1; font-size: 0.93rem; }
  .price-card li { padding: 7px 0 7px 26px; position: relative; }
  .price-card li::before {
    content: ""; position: absolute; left: 2px; top: 14px; width: 10px; height: 6px;
    border-left: 2px solid var(--green); border-bottom: 2px solid var(--green); transform: rotate(-45deg);
  }
  .price-footnote { font-size: 0.88rem; color: var(--ink-soft); margin-top: 24px; max-width: 760px; }

  /* Testimonials */
  .quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
  .quote {
    margin: 0; padding: 32px 28px; background: var(--white); border-radius: 12px; border: 1px solid var(--line);
    display: flex; flex-direction: column; gap: 20px;
  }
  .quote blockquote { margin: 0; font-family: var(--serif); font-size: 1.12rem; line-height: 1.5; }
  .quote figcaption { font-size: 0.88rem; color: var(--ink-soft); margin-top: auto; }
  .quote figcaption strong { display: block; color: var(--ink); font-size: 0.95rem; }

  /* FAQ */
  .faq-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 64px; }
  .faq-intro p { color: var(--ink-soft); }
  details { border-bottom: 1px solid var(--line); }
  details:first-of-type { border-top: 1px solid var(--line); }
  summary {
    list-style: none; cursor: pointer; padding: 22px 36px 22px 0;
    font-weight: 600; position: relative; font-size: 1.02rem;
  }
  summary::-webkit-details-marker { display: none; }
  summary::after {
    content: "+"; position: absolute; right: 4px; top: 16px;
    font-size: 1.5rem; font-weight: 300; color: var(--green); transition: transform .2s;
  }
  details[open] summary::after { content: "–"; }
  details p { padding: 0 36px 24px 0; margin: 0; color: var(--ink-soft); }

  /* Contact */
  .contact { background: var(--ink); color: var(--paper); }
  .contact .eyebrow { color: var(--amber); }
  .contact .lead { color: #B9C2BE; }
  .contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: start; }
  .visit-list { list-style: none; padding: 0; margin: 32px 0 0; }
  .visit-list li { padding: 16px 0; border-top: 1px solid #34403C; display: flex; justify-content: space-between; gap: 16px; font-size: 0.97rem; }
  .visit-list li:last-child { border-bottom: 1px solid #34403C; }
  .visit-list span:first-child { color: #B9C2BE; }
  .form {
    background: var(--paper); color: var(--ink); border-radius: 14px; padding: 36px;
  }
  .form h3 { font-size: 1.5rem; }
  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .field { margin-bottom: 16px; display: flex; flex-direction: column; gap: 6px; }
  .field label { font-size: 0.88rem; font-weight: 600; }
  .field input, .field select, .field textarea {
    font: inherit; font-size: 0.97rem; padding: 12px 14px;
    border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--white); color: var(--ink);
  }
  .field textarea { min-height: 110px; resize: vertical; }
  .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--green); outline: none; box-shadow: 0 0 0 3px rgba(47,74,62,.15); }
  .field .err { color: #A23B2A; font-size: 0.82rem; display: none; }
  .field.invalid input, .field.invalid select { border-color: #A23B2A; }
  .field.invalid .err { display: block; }
  .form .btn { width: 100%; margin-top: 4px; }
  .form-fine { font-size: 0.82rem; color: var(--ink-soft); margin: 14px 0 0; }
  .form-success {
    display: none; padding: 16px; border-radius: var(--radius); background: #E3EEE7; color: var(--green-deep); font-size: 0.95rem; margin-top: 16px;
  }
  .form-success.show { display: block; }

  /* Footer */
  footer { background: #131A18; color: #9AA5A1; padding: 56px 0 32px; font-size: 0.9rem; }
  .foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
  footer .brand-name { color: var(--paper); }
  footer h4 { color: var(--paper); font-size: 0.85rem; text-transform: uppercase; letter-spacing: .12em; margin: 0 0 14px; font-family: var(--sans); font-weight: 600; }
  footer ul { list-style: none; padding: 0; margin: 0; }
  footer li { margin-bottom: 9px; }
  footer a { text-decoration: none; color: #9AA5A1; }
  footer a:hover { color: var(--paper); }
  .foot-bottom {
    margin-top: 48px; padding-top: 24px; border-top: 1px solid #2A3430;
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 0.84rem;
  }

  /* Responsive */
  @media (max-width: 960px) {
    .hero-grid, .config-grid, .craft-grid, .faq-grid, .contact-grid { grid-template-columns: 1fr; gap: 40px; }
    .summary { position: static; }
    .trust-grid { grid-template-columns: repeat(2, 1fr); }
    .steps { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
    .step:nth-child(2n) { padding-left: 0; }
    .price-cards, .quotes { grid-template-columns: 1fr; }
    .foot-grid { grid-template-columns: 1fr 1fr; }
    .nav-links, .nav-cta .btn-desk { display: none; }
    .menu-toggle { display: block; }
    .nav-links.open {
      display: flex; flex-direction: column; position: absolute; top: 72px; left: 0; right: 0;
      background: var(--paper); padding: 16px 24px 24px; border-bottom: 1px solid var(--line); gap: 16px;
    }
  }
  @media (max-width: 560px) {
    body { font-size: 16px; }
    .trust-grid { grid-template-columns: 1fr; }
    .steps { grid-template-columns: 1fr; }
    .step { padding-left: 0; }
    .spec { grid-template-columns: 1fr; gap: 4px; }
    .form-row { grid-template-columns: 1fr; }
    .form { padding: 24px; }
    .foot-grid { grid-template-columns: 1fr; }
    .hero-meta { gap: 20px; }
    .hero-caption, .hero-tag { display: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; }
  }
</style>
</head>
<body>

<!-- Header -->
<header class="site">
  <div class="wrap nav">
    <a href="#top" class="brand" aria-label="Lumen Cycles home">
      <svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true">
        <circle cx="15" cy="15" r="13" fill="none" stroke="#2F4A3E" stroke-width="2"/>
        <path d="M15 6 L15 24" stroke="#D9952B" stroke-width="3" stroke-linecap="round"/>
        <path d="M9 17 L15 11 L21 17" fill="none" stroke="#2F4A3E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
      <span class="brand-name">Lumen<span>.</span></span>
    </a>
    <ul class="nav-links" id="navLinks">
      <li><a href="#configure">Configure</a></li>
      <li><a href="#craft">Craft</a></li>
      <li><a href="#pricing">Pricing</a></li>
      <li><a href="#faq">Questions</a></li>
      <li><a href="#visit">Visit us</a></li>
    </ul>
    <div class="nav-cta">
      <a href="#visit" class="btn btn-primary btn-desk">Book a fitting</a>
      <button class="menu-toggle" id="menuToggle" aria-label="Open menu" aria-expanded="false" aria-controls="navLinks">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 7h16M4 12h16M4 17h16"/></svg>
      </button>
    </div>
  </div>
</header>

<main id="top">

<!-- Hero -->
<section class="hero">
  <div class="wrap hero-grid">
    <div>
      <span class="eyebrow">Handbuilt in Nørrebro, Copenhagen</span>
      <h1>Cargo bikes built <em>around</em> your family.</h1>
      <p class="lead">We are a small workshop of frame builders, wheel builders and painters. Every Lumen is measured for the rider, specified for the route and welded to order. You will meet the person building your bike before the first cut is made.</p>
      <div class="hero-actions">
        <a href="#configure" class="btn btn-primary">Configure your bike</a>
        <a href="#visit" class="btn btn-ghost">Book a fitting visit</a>
      </div>
      <div class="hero-meta">
        <div><strong>1,400+</strong>bikes delivered since 2009</div>
        <div><strong>8–10 wks</strong>typical build time</div>
        <div><strong>5 years</strong>frame warranty</div>
      </div>
    </div>

    <div class="hero-art">
      <span class="hero-tag">Model L2 · Long box</span>
      <svg viewBox="0 0 520 380" role="img" aria-label="Illustration of a Lumen long-tail cargo bike with a front box and rear bench">
        <!-- ground -->
        <line x1="30" y1="330" x2="490" y2="330" stroke="#B9B2A2" stroke-width="2"/>
        <!-- rear wheel -->
        <circle cx="130" cy="262" r="62" fill="none" stroke="#1B2321" stroke-width="9"/>
        <circle cx="130" cy="262" r="6" fill="#1B2321"/>
        <!-- front wheel -->
        <circle cx="390" cy="262" r="62" fill="none" stroke="#1B2321" stroke-width="9"/>
        <circle cx="390" cy="262" r="6" fill="#1B2321"/>
        <!-- spokes rear -->
        <g stroke="#8A9490" stroke-width="1.2">
          <line x1="130" y1="262" x2="130" y2="200"/><line x1="130" y1="262" x2="186" y2="262"/>
          <line x1="130" y1="262" x2="72" y2="262"/><line x1="130" y1="262" x2="130" y2="324"/>
          <line x1="130" y1="262" x2="174" y2="218"/><line x1="130" y1="262" x2="86" y2="306"/>
          <line x1="130" y1="262" x2="86" y2="218"/><line x1="130" y1="262" x2="174" y2="306"/>
        </g>
        <g stroke="#8A9490" stroke-width="1.2">
          <line x1="390" y1="262" x2="390" y2="200"/><line x1="390" y1="262" x2="446" y2="262"/>
          <line x1="390" y1="262" x2="332" y2="262"/><line x1="390" y1="262" x2="390" y2="324"/>
          <line x1="390" y1="262" x2="434" y2="218"/><line x1="390" y1="262" x2="346" y2="306"/>
          <line x1="390" y1="262" x2="346" y2="218"/><line x1="390" y1="262" x2="434" y2="306"/>
        </g>
        <!-- frame -->
        <path d="M130 262 L220 262 L300 170 L390 262" fill="none" stroke="#2F4A3E" stroke-width="10" stroke-linejoin="round" stroke-linecap="round"/>
        <path d="M130 262 L168 178 L220 178 L220 262" fill="none" stroke="#2F4A3E" stroke-width="8" stroke-linejoin="round" stroke-linecap="round"/>
        <path d="M300 170 L330 120 L300 120" fill="none" stroke="#2F4A3E" stroke-width="8" stroke-linejoin="round" stroke-linecap="round"/>
        <path d="M300 170 L390 262" fill="none" stroke="#2F4A3E" stroke-width="10" stroke-linecap="round"/>
        <!-- front box -->
        <path d="M330 120 L470 120 L470 210 L330 210 Z" fill="#D9952B"/>
        <path d="M330 120 L470 120 L470 136 L330 136 Z" fill="#B87B20"/>
        <line x1="400" y1="136" x2="400" y2="210" stroke="#B87B20" stroke-width="3"/>
        <!-- box frame struts -->
        <path d="M300 170 L330 210" stroke="#2F4A3E" stroke-width="7" stroke-linecap="round"/>
        <!-- handlebar + stem -->
        <path d="M330 120 L318 96" stroke="#1B2321" stroke-width="6" stroke-linecap="round"/>
        <path d="M312 92 L330 92" stroke="#1B2321" stroke-width="6" stroke-linecap="round"/>
        <!-- seat -->
        <path d="M150 170 L186 170" stroke="#1B2321" stroke-width="9" stroke-linecap="round"/>
        <path d="M170 170 L178 150" stroke="#2F4A3E" stroke-width="6" stroke-linecap="round"/>
        <!-- rear bench -->
        <rect x="120" y="172" width="0" height="0"/>
        <path d="M76 214 L120 214" stroke="#2F4A3E" stroke-width="7" stroke-linecap="round"/>
        <!-- chainring -->
        <circle cx="220" cy="262" r="20" fill="none" stroke="#1B2321" stroke-width="4"/>
        <circle cx="220" cy="262" r="4" fill="#1B2321"/>
        <!-- rider silhouette -->
        <circle cx="200" cy="116" r="11" fill="#1B2321"/>
        <path d="M184 176 L200 132 L222 134 L216 170 Z" fill="#1B2321"/>
        <path d="M222 134 L300 150" stroke="#1B2321" stroke-width="9" stroke-linecap="round"/>
        <path d="M204 170 L240 230 L244 262" fill="none" stroke="#1B2321" stroke-width="9" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
      <div class="hero-caption">Shown in Lumen Green, 2.4 m overall length</div>
    </div>
  </div>
</section>

<!-- Trust bar -->
<div class="trust" aria-label="Why Lumen">
  <div class="wrap trust-grid">
    <div class="trust-item"><strong>Built in-house</strong>Frames are welded and aligned in our workshop, not outsourced.</div>
    <div class="trust-item"><strong>Fitted to you</strong>A 45-minute measurement session before we start your frame.</div>
    <div class="trust-item"><strong>Fixed quote</strong>The price you approve is the price you pay. No surprises at delivery.</div>
    <div class="trust-item"><strong>Serviced locally</strong>Parts stocked in Copenhagen. Repairs done on the same bench.</div>
  </div>
</div>

<!-- Process -->
<section id="process" aria-labelledby="process-title">
  <div class="wrap">
    <span class="eyebrow">The process</span>
    <h2 id="process-title">Four stages. No shortcuts.</h2>
    <p class="lead">From first conversation to first ride, most customers are on their bike in ten weeks. Here is what happens in between.</p>
    <ol class="steps">
      <li class="step">
        <h3>Consult</h3>
        <p>Tell us what you carry, where you ride and who rides with you. We will recommend, and sometimes talk you out of, what you asked for.</p>
      </li>
      <li class="step">
        <h3>Measure</h3>
        <p>We measure inseam, reach and torso in our fitting room. Your geometry is calculated from your body, not from a size chart.</p>
      </li>
      <li class="step">
        <h3>Build</h3>
        <p>Tubing is cut, mitred and TIG-welded by hand. Wheels are hand-laced and tensioned. Each stage is signed off on a checklist.</p>
      </li>
      <li class="step">
        <h3>Ride &amp; return</h3>
        <p>We hand over the bike in person, adjust it with you, and check it again after 300 km. Service intervals are on the paperwork.</p>
      </li>
    </ol>
  </div>
</section>

<!-- Configurator -->
<section id="configure" class="configurator" aria-labelledby="config-title">
  <div class="wrap">
    <span class="eyebrow">Configure</span>
    <h2 id="config-title">Specify your Lumen</h2>
    <p class="lead">Choose the parts that matter for your use. The price updates as you go. Final pricing is confirmed after your measuring session.</p>

    <div class="config-grid">
      <div>
        <fieldset>
          <legend>Model <small>Frame is always built to your measurements</small></legend>
          <div class="options" role="radiogroup" aria-label="Model">
            <label class="option">
              <input type="radio" name="model" value="2690" checked>
              <span class="o-name">L1 Urban</span>
              <span class="o-desc">Two-wheel front box. Daily school and grocery runs.</span>
              <span class="o-price">From €2,690</span>
            </label>
            <label class="option">
              <input type="radio" name="model" value="2890">
              <span class="o-name">L2 Long-tail</span>
              <span class="o-desc">Extended rear, room for two children or a bench seat.</span>
              <span class="o-price">From €2,890</span>
            </label>
          </div>
        </fieldset>

        <fieldset>
          <legend>Box length <small>Front cargo</small></legend>
          <div class="options" role="radiogroup" aria-label="Box length">
            <label class="option">
              <input type="radio" name="box" value="0" checked>
              <span class="o-name">Standard · 90 cm</span>
              <span class="o-desc">Fits two crates side by side.</span>
              <span class="o-price">Included</span>
            </label>
            <label class="option">
              <input type="radio" name="box" value="240">
              <span class="o-name">Extended · 120 cm</span>
              <span class="o-desc">Room for a child seat and a week of shopping.</span>
              <span class="o-price">+ €240</span>
            </label>
          </div>
        </fieldset>

        <fieldset>
          <legend>Drivetrain</legend>
          <div class="options" role="radiogroup" aria-label="Drivetrain">
            <label class="option">
              <input type="radio" name="drive" value="0" checked>
              <span class="o-name">Nexus 8-speed</span>
              <span class="o-desc">Internal hub, sealed. Low maintenance.</span>
              <span class="o-price">Included</span>
            </label>
            <label class="option">
              <input type="radio" name="drive" value="380">
              <span class="o-name">Belt drive</span>
              <span class="o-desc">Quiet, clean, no lubricant on the chain.</span>
              <span class="o-price">+ €380</span>
            </label>
            <label class="option">
              <input type="radio" name="drive" value="1450">
              <span class="o-name">Rohloff 14-speed</span>
              <span class="o-desc">Sealed gearing, built to last decades.</span>
              <span class="o-price">+ €1,450</span>
            </label>
          </div>
        </fieldset>

        <fieldset>
          <legend>Electric assist</legend>
          <div class="options" role="radiogroup" aria-label="Electric assist">
            <label class="option">
              <input type="radio" name="motor" value="0" checked>
              <span class="o-name">Unassisted</span>
              <span class="o-desc">Pure human power. Lighter and simpler.</span>
              <span class="o-price">Included</span>
            </label>
            <label class="option">
              <input type="radio" name="motor" value="1090">
              <span class="o-name">Mid-drive, 500 Wh</span>
              <span class="o-desc">Strong hill support with a 500 Wh battery.</span>
              <span class="o-price">+ €1,090</span>
            </label>
          </div>
        </fieldset>

        <fieldset>
          <legend>Paint</legend>
          <div class="options" role="radiogroup" aria-label="Paint">
            <label class="option">
              <input type="radio" name="paint" value="0" checked>
              <span class="o-name">Lumen Green</span>
              <span class="o-desc">Our standard colour. Stoved enamel.</span>
              <span class="o-price">Included</span>
            </label>
            <label class="option">
              <input type="radio" name="paint" value="120">
              <span class="o-name">Oxblood</span>
              <span class="o-desc">Deep red, hand-masked pinstripe.</span>
              <span class="o-price">+ €120</span>
            </label>
            <label class="option">
              <input type="radio" name="paint" value="210">
              <span class="o-name">Custom RAL</span>
              <span class="o-desc">Any RAL code, sprayed in our booth.</span>
              <span class="o-price">+ €210</span>
            </label>
          </div>
        </fieldset>
      </div>

      <aside class="summary" aria-live="polite">
        <h3>Your estimate</h3>
        <p class="sub" id="modelLabel">L1 Urban · Standard box</p>
        <ul id="lineItems"></ul>
        <div class="total">
          <span class="label">Estimated total</span>
          <span class="value" id="totalValue">€2,690</span>
        </div>
        <p class="note">Includes VAT (25%). Excludes delivery within Denmark, which is free within the city.</p>
        <div class="lead-time">
          <svg viewBox="0 0 18 18" fill="none" stroke="#1B2321" stroke-width="1.6" aria-hidden="true"><circle cx="9" cy="9" r="7.5"/><path d="M9 5v4.5l3 1.8" stroke-linecap="round"/></svg>
          <span id="leadText">Estimated build time: 8–10 weeks from deposit.</span>
        </div>
        <a href="#visit" class="btn btn-primary" id="configCta">Request a fixed quote</a>
      </aside>
    </div>
  </div>
</section>

<!-- Craft -->
<section id="craft" aria-labelledby="craft-title">
  <div class="wrap craft-grid">
    <div class="craft-visual" aria-hidden="true">
      <svg viewBox="0 0 480 420">
        <rect x="0" y="0" width="480" height="420" fill="#2F4A3E"/>
        <!-- workbench -->
        <rect x="40" y="318" width="400" height="16" fill="#D9952B" rx="2"/>
        <rect x="70" y="334" width="10" height="60" fill="#D9952B"/>
        <rect x="400" y="334" width="10" height="60" fill="#D9952B"/>
        <!-- jig -->
        <path d="M120 318 L120 150 L200 150 L200 318" fill="none" stroke="#F4F1EA" stroke-width="5"/>
        <path d="M120 150 L360 230 L360 318" fill="none" stroke="#F4F1EA" stroke-width="5" stroke-linejoin="round"/>
        <path d="M200 150 L260 300" fill="none" stroke="#F4F1EA" stroke-width="4"/>
        <!-- tubing -->
        <path d="M160 230 L300 200" stroke="#F3DFB7" stroke-width="12" stroke-linecap="round"/>
        <path d="M120 290 L240 290" stroke="#F3DFB7" stroke-width="12" stroke-linecap="round"/>
        <path d="M240 290 L300 200" stroke="#F3DFB7" stroke-width="12" stroke-linecap="round"/>
        <!-- weld glow -->
        <circle cx="300" cy="200" r="16" fill="#FFB347" opacity=".35"/>
        <circle cx="300" cy="200" r="7" fill="#FFD27A"/>
        <!-- wheel on wall -->
        <circle cx="390" cy="110" r="52" fill="none" stroke="#F4F1EA" stroke-width="5"/>
        <g stroke="#F4F1EA" stroke-width="1" opacity=".6">
          <line x1="390" y1="110" x2="390" y2="58"/><line x1="390" y1="110" x2="442" y2="110"/>
          <line x1="390" y1="110" x2="338" y2="110"/><line x1="390" y1="110" x2="390" y2="162"/>
          <line x1="390" y1="110" x2="427" y2="73"/><line x1="390" y1="110" x2="353" y2="147"/>
          <line x1="390" y1="110" x2="353" y2="73"/><line x1="390" y1="110" x2="427" y2="147"/>
        </g>
        <circle cx="390" cy="110" r="5" fill="#F4F1EA"/>
        <text x="40" y="60" fill="#F4F1EA" font-family="Georgia, serif" font-size="22" opacity=".85">Jig 07 · L2 Long-tail</text>
        <text x="40" y="88" fill="#F3DFB7" font-family="Helvetica, Arial, sans-serif" font-size="12" letter-spacing="2">HEAD ANGLE 68.5° · REACH 412 MM</text>
      </svg>
    </div>
    <div>
      <span class="eyebrow">The workshop</span>
      <h2 id="craft-title">Made by people you can visit.</h2>
      <p class="lead">Our workshop sits on the second floor of a former printing works in Nørrebro. Eight people build bikes here, and each frame is signed by the builder who welded it. Visits are welcome by appointment.</p>
      <dl class="spec-list">
        <div class="spec"><dt>Frame tubing</dt><dd>Double-butted chromoly (4130), sourced from a German mill, with frame numbers recorded per build.</dd></div>
        <div class="spec"><dt>Welding</dt><dd>TIG, by hand, on steel jigs. Alignment checked to 0.5 mm tolerance before paint.</dd></div>
        <div class="spec"><dt>Wheels</dt><dd>Hand-laced 36-spoke rims, tensioned and trued in-house. Rated for loads up to 200 kg.</dd></div>
        <div class="spec"><dt>Warranty</dt><dd>Five years on frame and fork, two years on paint and components. Written and signed on delivery.</dd></div>
      </dl>
    </div>
  </div>
</section>

<!-- Pricing -->
<section id="pricing" class="pricing" aria-labelledby="pricing-title">
  <div class="wrap">
    <span class="eyebrow">Pricing</span>
    <h2 id="pricing-title">Honest prices, in writing.</h2>
    <p class="lead">Every Lumen starts from a published base price. You see every option before you commit, and the quote you sign is the one you pay.</p>

    <div class="price-cards">
      <article class="price-card">
        <span class="tier">Unassisted</span>
        <div class="amount">€2,690 <small>from</small></div>
        <p class="desc">Pure human power. The simplest, lightest Lumen we build.</p>
        <ul>
          <li>L1 Urban frame, standard box</li>
          <li>Nexus 8-speed hub</li>
          <li>Five-year frame warranty</li>
          <li>One free service at 6 months</li>
        </ul>
        <a href="#configure" class="btn btn-ghost">Configure</a>
      </article>
      <article class="price-card featured">
        <span class="tier">Most chosen · Mid-drive</span>
        <div class="amount">€3,780 <small>typical</small></div>
        <p class="desc">Electric assist for hills, loads and longer commutes.</p>
        <ul>
          <li>L2 Long-tail frame</li>
          <li>Mid-drive motor with 500 Wh battery</li>
          <li>Nexus 8-speed hub</li>
          <li>Lifetime support on motor software</li>
        </ul>
        <a href="#configure" class="btn btn-primary">Configure</a>
      </article>
      <article class="price-card">
        <span class="tier">Fully specified</span>
        <div class="amount">€4,950 <small>from</small></div>
        <p class="desc">Rohloff, belt drive and custom paint, for daily heavy use.</p>
        <ul>
          <li>Rohloff 14-speed</li>
          <li>Belt drive and 750 Wh battery</li>
          <li>Custom RAL paint</li>
          <li>Two free services in year one</li>
        </ul>
        <a href="#configure" class="btn btn-ghost">Configure</a>
      </article>
    </div>

    <p class="price-footnote">Prices include 25% Danish VAT and are quoted in euros for reference. Final invoices are issued in DKK at the rate on the day of deposit. A 30% deposit secures your build slot and is credited against the final balance, due on collection. Deposits are refundable within 14 days of signing.</p>
  </div>
</section>

<!-- Testimonials -->
<section aria-labelledby="quotes-title">
  <div class="wrap">
    <span class="eyebrow">Riders</span>
    <h2 id="quotes-title">What our customers ride.</h2>
    <div class="quotes">
      <figure class="quote">
        <blockquote>“I wanted a bike my two children could not wreck. Lumen measured me in the workshop, then built the box around what we actually carry. It has done four years of school runs in the rain.”</blockquote>
        <figcaption><strong>Mette H.</strong>L2 Long-tail, Frederiksberg</figcaption>
      </figure>
      <figure class="quote">
        <blockquote>“The fixed quote was the reason I chose them. The price on the invoice matched the paper I signed in March. The bike rides like it was made for my height, because it was.”</blockquote>
        <figcaption><strong>Jonas K.</strong>L1 Urban with belt drive, Vesterbro</figcaption>
      </figure>
      <figure class="quote">
        <blockquote>“I run a small bakery and do three deliveries a day. The Rohloff has needed nothing but a quick check. When I asked a question about the wheel, the person who laced it answered the phone.”</blockquote>
        <figcaption><strong>Sara L.</strong>Fully specified, Nordhavn</figcaption>
      </figure>
    </div>
  </div>
</section>

<!-- FAQ -->
<section id="faq" aria-labelledby="faq-title" style="padding-top:0">
  <div class="wrap faq-grid">
    <div class="faq-intro">
      <span class="eyebrow">Questions</span>
      <h2 id="faq-title">Things people ask before they order.</h2>
      <p>Cannot find your answer? Write to us or come in on a Saturday morning. We will answer the question properly.</p>
      <a href="#visit" class="btn btn-ghost" style="margin-top:12px">Ask us directly</a>
    </div>
    <div>
      <details>
        <summary>How long does a build take?</summary>
        <p>Most orders are delivered in eight to ten weeks from the date your deposit clears. Rohloff and custom paint can add up to two weeks. We will confirm your date in writing when you sign.</p>
      </details>
      <details>
        <summary>Can I try a bike before I order?</summary>
        <p>Yes. We keep demonstration frames of both models in the workshop. Book a 30-minute visit and we will ride with you on the street outside.</p>
      </details>
      <details>
        <summary>Will the bike fit me if I am very tall or very short?</summary>
        <p>Our frame geometry is calculated from your measurements. We build from roughly 150 cm to 200 cm rider height, and we will tell you honestly if a model is not right for your proportions.</p>
      </details>
      <details>
        <summary>How much can it carry?</summary>
        <p>The L1 is rated for 150 kg of rider and cargo, and the L2 for 200 kg, including the box and any child seats. The limits are printed on a plate on the frame and in your handover documents.</p>
      </details>
      <details>
        <summary>What happens if something breaks?</summary>
        <p>The frame and fork are covered for five years. Parts that fail in normal use are replaced at cost or free within warranty. Because we build locally, most repairs are done within a few working days at our bench.</p>
      </details>
      <details>
        <summary>Do you deliver outside Copenhagen?</summary>
        <p>We deliver across Denmark and to parts of Sweden and northern Germany. Delivery is free within Copenhagen municipality. Elsewhere we quote a flat fee at the consultation stage.</p>
      </details>
    </div>
  </div>
</section>

<!-- Contact -->
<section class="contact" id="visit" aria-labelledby="visit-title">
  <div class="wrap contact-grid">
    <div>
      <span class="eyebrow">Visit &amp; enquire</span>
      <h2 id="visit-title">Come and see the bench.</h2>
      <p class="lead">Our doors are open to visitors by appointment. Bring your children, your shopping list and your questions.</p>
      <ul class="visit-list">
        <li><span>Workshop</span><span>Nørrebrogade 118, 2200 København N</span></li>
        <li><span>Open</span><span>Tue–Fri 10:00–17:30 · Sat 10:00–14:00</span></li>
        <li><span>Phone</span><span>+45 31 00 42 17</span></li>
        <li><span>Email</span><span>hello@lumencycles.example</span></li>
        <li><span>Parking</span><span>Cargo bay on Korsgade, free for 30 minutes</span></li>
      </ul>
    </div>

    <form class="form" id="enquiryForm" novalidate>
      <h3>Request a fitting visit</h3>
      <p class="form-fine" style="margin:0 0 20px;color:var(--ink-soft)">Tell us a little about your riding. A builder will reply within two working days.</p>
      <div class="form-row">
        <div class="field" id="fName">
          <label for="name">Full name</label>
          <input id="name" name="name" type="text" autocomplete="name" required>
          <span class="err">Please enter your name.</span>
        </div>
        <div class="field" id="fEmail">
          <label for="email">Email</label>
          <input id="email" name="email" type="email" autocomplete="email" required>
          <span class="err">Please enter a valid email address.</span>
        </div>
      </div>
      <div class="form-row">
        <div class="field">
          <label for="phone">Phone (optional)</label>
          <input id="phone" name="phone" type="tel" autocomplete="tel">
        </div>
        <div class="field">
          <label for="interest">Model of interest</label>
          <select id="interest" name="interest">
            <option>Not sure yet</option>
            <option>L1 Urban</option>
            <option>L2 Long-tail</option>
            <option>Fully specified</option>
          </select>
        </div>
      </div>
      <div class="field">
        <label for="message">What will you carry, and where will you ride?</label>
        <textarea id="message" name="message" placeholder="For example: two children aged 3 and 6, school run in Frederiksberg, a hill on the way home."></textarea>
      </div>
      <button type="submit" class="btn btn-primary">Send enquiry</button>
      <p class="form-fine">We will use your details only to reply to this enquiry. No newsletters without asking.</p>
      <div class="form-success" id="formSuccess" role="status">Thank you. Your enquiry has been received and a builder will be in touch within two working days.</div>
    </form>
  </div>
</section>

</main>

<!-- Footer -->
<footer>
  <div class="wrap">
    <div class="foot-grid">
      <div>
        <a href="#top" class="brand" style="margin-bottom:14px">
          <svg width="26" height="26" viewBox="0 0 30 30" aria-hidden="true">
            <circle cx="15" cy="15" r="13" fill="none" stroke="#D9952B" stroke-width="2"/>
            <path d="M15 6 L15 24" stroke="#F4F1EA" stroke-width="3" stroke-linecap="round"/>
            <path d="M9 17 L15 11 L21 17" fill="none" stroke="#F4F1EA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
          <span class="brand-name">Lumen<span>.</span></span>
        </a>
        <p style="max-width:300px">Custom cargo bikes, built to order by hand in Copenhagen since 2009.</p>
      </div>
      <div>
        <h4>Bikes</h4>
        <ul>
          <li><a href="#configure">Configure</a></li>
          <li><a href="#pricing">Pricing</a></li>
          <li><a href="#craft">Craft</a></li>
          <li><a href="#process">Process</a></li>
        </ul>
      </div>
      <div>
        <h4>Support</h4>
        <ul>
          <li><a href="#faq">Questions</a></li>
          <li><a href="#faq">Warranty</a></li>
          <li><a href="#faq">Service</a></li>
          <li><a href="#visit">Contact</a></li>
        </ul>
      </div>
      <div>
        <h4>Workshop</h4>
        <ul>
          <li>Nørrebrogade 118</li>
          <li>2200 København N</li>
          <li><a href="#visit">Book a visit</a></li>
        </ul>
      </div>
    </div>
    <div class="foot-bottom">
      <span>© <span id="year">2025</span> Lumen Cycles ApS. All rights reserved.</span>
      <span>Prices include VAT. Warranty terms available on request.</span>
    </div>
  </div>
</footer>

<script>
(function () {
  "use strict";

  // Mobile menu
  var toggle = document.getElementById("menuToggle");
  var links = document.getElementById("navLinks");
  toggle.addEventListener("click", function () {
    var open = links.classList.toggle("open");
    toggle.setAttribute("aria-expanded", String(open));
    toggle.setAttribute("aria-label", open ? "Close menu" : "Open menu");
  });
  links.addEventListener("click", function (e) {
    if (e.target.tagName === "A") {
      links.classList.remove("open");
      toggle.setAttribute("aria-expanded", "false");
    }
  });

  // Footer year
  document.getElementById("year").textContent = new Date().getFullYear();

  // Configurator
  var BASE_LABEL = {
    model: { "2690": "L1 Urban", "2890": "L2 Long-tail" },
    box: { "0": "Standard box", "240": "Extended box" },
    drive: { "0": "Nexus 8-speed", "380": "Belt drive", "1450": "Rohloff 14-speed" },
    motor: { "0": "Unassisted", "1090": "Mid-drive" },
    paint: { "0": "Lumen Green", "120": "Oxblood", "210": "Custom RAL" }
  };
  var LABELS = { model: "Model", box: "Box", drive: "Drivetrain", motor: "Assist", paint: "Paint" };

  function fmt(n) {
    return "€" + n.toLocaleString("en-GB");
  }

  function readSelections() {
    var sel = {};
    ["model", "box", "drive", "motor", "paint"].forEach(function (name) {
      var checked = document.querySelector('input[name="' + name + '"]:checked');
      sel[name] = checked ? checked.value : "0";
    });
    return sel;
  }

  function updateConfigurator() {
    var sel = readSelections();
    var list = document.getElementById("lineItems");
    list.innerHTML = "";
    var total = 0;

    Object.keys(LABELS).forEach(function (key) {
      var value = sel[key];
      var price = key === "model" ? Number(value) : Number(value);
      total += price;
      var li = document.createElement("li");
      var left = document.createElement("span");
      var right = document.createElement("span");
      left.textContent = LABELS[key] + ": " + BASE_LABEL[key][value];
      right.textContent = key === "model" ? fmt(price) : (price ? "+ " + fmt(price) : "Included");
      li.appendChild(left);
      li.appendChild(right);
      list.appendChild(li);
    });

    document.getElementById("totalValue").textContent = fmt(total);
    document.getElementById("modelLabel").textContent =
      BASE_LABEL.model[sel.model] + " · " + BASE_LABEL.box[sel.box] + " · " + BASE_LABEL.paint[sel.paint];

    var weeks = 8;
    if (sel.drive === "1450" || sel.paint === "210") weeks = 10;
    if (sel.model === "2890" && sel.drive === "1450") weeks = 10;
    document.getElementById("leadText").textContent =
      "Estimated build time: " + (weeks === 8 ? "8–10" : "10–12") + " weeks from deposit.";

    var cta = document.getElementById("configCta");
    cta.href = "#visit";
    cta.dataset.total = String(total);
  }

  document.querySelectorAll('#configure input[type="radio"]').forEach(function (input) {
    input.addEventListener("change", updateConfigurator);
  });
  updateConfigurator();

  // Enquiry form validation (local only, no network)
  var form = document.getElementById("enquiryForm");
  var success = document.getElementById("formSuccess");

  function setInvalid(field, bad) {
    field.classList.toggle("invalid", bad);
    var input = field.querySelector("input");
    if (input) input.setAttribute("aria-invalid", String(bad));
  }

  form.addEventListener("submit", function (e) {
    e.preventDefault();
    var name = document.getElementById("name");
    var email = document.getElementById("email");
    var fName = document.getElementById("fName");
    var fEmail = document.getElementById("fEmail");

    var nameBad = name.value.trim().length < 2;
    var emailBad = !/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(email.value.trim());

    setInvalid(fName, nameBad);
    setInvalid(fEmail, emailBad);

    if (nameBad || emailBad) {
      success.classList.remove("show");
      (nameBad ? name : email).focus();
      return;
    }

    success.classList.add("show");
    form.reset();
    document.getElementById("interest").value = "Not sure yet";
  });

  ["name", "email"].forEach(function (id) {
    document.getElementById(id).addEventListener("input", function () {
      setInvalid(this.parentElement, false);
    });
  });
})();
</script>
</body>
</html>

Compare with

Claude Haiku 5.5: other attempts