hypeorcode
Network offOpen alone (new tab)

Run details

Model
google/gemini-4-argon
Route
OpenRouter API, one user message
Reasoning
provider default
Limits
60 min · 60,000 output tokens
Date
21 Oct 2026
Time
4 min 14 s
Size
72 kB
Tokens
120 in, 21,238 out
List price
$0.21 ($2 in / $10 out per M)
Paid
$0.21

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

72 kB 1,657 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 — Copenhagen</title>
    <style>
        :root {
            --bg-primary: #F4F1EA;
            --bg-secondary: #EBE6DC;
            --bg-dark: #181817;
            --text-primary: #181817;
            --text-secondary: #5A5852;
            --text-light: #F4F1EA;
            --accent-rust: #B84A27;
            --accent-forest: #24382C;
            --accent-brass: #C59B27;
            --border-color: #D6D1C7;
            --border-dark: #333330;
            
            --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            --font-serif: "Instrument Serif", "Playfair Display", Georgia, "Times New Roman", serif;
            --font-mono: "SF Mono", "JetBrains Mono", Consolas, "Courier New", monospace;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html {
            scroll-behavior: smooth;
            background-color: var(--bg-primary);
            color: var(--text-primary);
            font-family: var(--font-sans);
            font-size: 16px;
            line-height: 1.5;
            -webkit-font-smoothing: antialiased;
        }

        body {
            overflow-x: hidden;
        }

        /* Typography & Utility */
        h1, h2, h3, .serif {
            font-family: var(--font-serif);
            font-weight: 400;
        }

        .mono {
            font-family: var(--font-mono);
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.08em;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 2rem;
        }

        .grid {
            display: grid;
            gap: 2rem;
        }

        .border-top { border-top: 1px solid var(--border-color); }
        .border-bottom { border-bottom: 1px solid var(--border-color); }

        a {
            color: inherit;
            text-decoration: none;
        }

        button, .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 1rem 2rem;
            font-family: var(--font-mono);
            font-size: 0.8rem;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            border: 1px solid var(--text-primary);
            background: transparent;
            color: var(--text-primary);
            cursor: pointer;
            transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
        }

        button:hover, .btn:hover {
            background: var(--text-primary);
            color: var(--bg-primary);
        }

        .btn-primary {
            background: var(--text-primary);
            color: var(--bg-primary);
        }

        .btn-primary:hover {
            background: var(--accent-rust);
            border-color: var(--accent-rust);
            color: var(--text-light);
        }

        /* Header / Navigation */
        header {
            position: sticky;
            top: 0;
            z-index: 100;
            background: rgba(244, 241, 234, 0.9);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid var(--border-color);
        }

        .nav-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 80px;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            font-weight: 600;
            letter-spacing: 0.15em;
            font-size: 1rem;
        }

        .nav-links {
            display: flex;
            gap: 3rem;
            list-style: none;
        }

        .nav-links a {
            font-size: 0.9rem;
            position: relative;
        }

        .nav-links a::after {
            content: '';
            position: absolute;
            bottom: -4px;
            left: 0;
            width: 0%;
            height: 1px;
            background: var(--text-primary);
            transition: width 0.3s ease;
        }

        .nav-links a:hover::after {
            width: 100%;
        }

        /* Hero Section */
        .hero {
            padding: 4rem 0 6rem 0;
            min-height: calc(100vh - 80px);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .hero-header {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 4rem;
            align-items: end;
            margin-bottom: 3rem;
        }

        .hero-title {
            font-size: clamp(3.5rem, 6vw, 6.5rem);
            line-height: 0.95;
            letter-spacing: -0.02em;
        }

        .hero-subtitle {
            color: var(--text-secondary);
            font-size: 1.1rem;
            margin-bottom: 1.5rem;
            max-width: 40ch;
        }

        .hero-visual {
            width: 100%;
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            padding: 3rem;
            position: relative;
            overflow: hidden;
        }

        .blueprint-meta {
            display: flex;
            justify-content: space-between;
            margin-bottom: 1rem;
            color: var(--text-secondary);
        }

        .hero-svg-wrapper {
            width: 100%;
            aspect-ratio: 21 / 9;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .hero-svg-wrapper svg {
            width: 100%;
            height: 100%;
            overflow: visible;
        }

        .hero-stats {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            border-top: 1px solid var(--border-color);
            padding-top: 2rem;
            margin-top: 3rem;
        }

        .stat-item h4 {
            color: var(--text-secondary);
            margin-bottom: 0.5rem;
        }

        .stat-item p {
            font-size: 1.5rem;
            font-family: var(--font-serif);
        }

        /* Philosophy / Editorial Section */
        .editorial {
            padding: 8rem 0;
            border-top: 1px solid var(--border-color);
        }

        .editorial-grid {
            display: grid;
            grid-template-columns: 1fr 2fr;
            gap: 4rem;
        }

        .section-label {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            color: var(--accent-rust);
        }

        .section-label::before {
            content: '';
            display: inline-block;
            width: 8px;
            height: 8px;
            background: var(--accent-rust);
            border-radius: 50%;
        }

        .editorial-content h2 {
            font-size: clamp(2rem, 3.5vw, 3.5rem);
            line-height: 1.15;
            margin-bottom: 3rem;
        }

        .pillars {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2.5rem;
            border-top: 1px solid var(--border-color);
            padding-top: 3rem;
        }

        .pillar-card svg {
            width: 48px;
            height: 48px;
            margin-bottom: 1.5rem;
            stroke: var(--text-primary);
            stroke-width: 1.2;
            fill: none;
        }

        .pillar-card h3 {
            font-size: 1.5rem;
            margin-bottom: 0.75rem;
        }

        .pillar-card p {
            color: var(--text-secondary);
            font-size: 0.95rem;
            line-height: 1.6;
        }

        /* Interactive Configurator */
        .configurator-section {
            background: var(--bg-secondary);
            border-top: 1px solid var(--border-color);
            border-bottom: 1px solid var(--border-color);
            padding: 6rem 0;
        }

        .config-header {
            margin-bottom: 4rem;
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
        }

        .config-header h2 {
            font-size: 3rem;
            line-height: 1;
        }

        .config-workspace {
            display: grid;
            grid-template-columns: 1.6fr 1fr;
            gap: 4rem;
            align-items: start;
        }

        .config-stage {
            background: var(--bg-primary);
            border: 1px solid var(--border-color);
            padding: 3rem;
            position: sticky;
            top: 120px;
        }

        .stage-canvas {
            width: 100%;
            aspect-ratio: 16/10;
            position: relative;
        }

        .stage-canvas svg {
            width: 100%;
            height: 100%;
            transition: all 0.3s ease;
        }

        .stage-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-top: 1px solid var(--border-color);
            padding-top: 1.5rem;
            margin-top: 1.5rem;
        }

        .swatch-preview {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .swatch-dot {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            border: 1px solid rgba(0,0,0,0.2);
        }

        .config-controls {
            display: flex;
            flex-direction: column;
            gap: 2.5rem;
        }

        .control-group {
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 2rem;
        }

        .control-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 1rem;
        }

        .control-title {
            font-weight: 600;
            font-size: 1.1rem;
        }

        /* Color Swatches */
        .color-options {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1rem;
        }

        .color-btn {
            padding: 0.75rem;
            border: 1px solid var(--border-color);
            background: var(--bg-primary);
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.5rem;
            transition: all 0.2s ease;
        }

        .color-btn .circle {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            border: 1px solid rgba(0,0,0,0.15);
        }

        .color-btn.active {
            border-color: var(--text-primary);
            box-shadow: inset 0 0 0 1px var(--text-primary);
        }

        /* Radio Card Options */
        .radio-options {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }

        .radio-card {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1.25rem;
            background: var(--bg-primary);
            border: 1px solid var(--border-color);
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .radio-card:hover {
            border-color: #999;
        }

        .radio-card.active {
            border-color: var(--text-primary);
            box-shadow: inset 0 0 0 1px var(--text-primary);
            background: #FAF8F5;
        }

        .radio-info h4 {
            font-size: 1rem;
            font-weight: 600;
            margin-bottom: 0.2rem;
        }

        .radio-info p {
            font-size: 0.85rem;
            color: var(--text-secondary);
        }

        .radio-price {
            font-family: var(--font-mono);
            font-size: 0.85rem;
        }

        /* Summary Box */
        .summary-box {
            background: var(--bg-dark);
            color: var(--text-light);
            padding: 2.5rem;
        }

        .summary-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 0.75rem;
            font-size: 0.9rem;
            color: #A09E97;
        }

        .summary-total {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            border-top: 1px solid var(--border-dark);
            padding-top: 1.5rem;
            margin-top: 1.5rem;
            margin-bottom: 2rem;
        }

        .total-price {
            font-size: 2.5rem;
            font-family: var(--font-serif);
            color: var(--text-light);
        }

        .summary-box .btn-primary {
            width: 100%;
            background: var(--text-light);
            color: var(--bg-dark);
            border-color: var(--text-light);
        }

        .summary-box .btn-primary:hover {
            background: var(--accent-rust);
            border-color: var(--accent-rust);
            color: var(--text-light);
        }

        /* Specifications Table */
        .specs-section {
            padding: 8rem 0;
        }

        .specs-grid {
            display: grid;
            grid-template-columns: 1fr 2fr;
            gap: 4rem;
        }

        .spec-table {
            width: 100%;
            border-collapse: collapse;
        }

        .spec-table tr {
            border-bottom: 1px solid var(--border-color);
        }

        .spec-table th, .spec-table td {
            padding: 1.5rem 0;
            text-align: left;
            vertical-align: top;
        }

        .spec-table th {
            width: 35%;
            font-family: var(--font-mono);
            font-size: 0.8rem;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .spec-table td {
            font-size: 1.05rem;
        }

        /* The Process / Workshop */
        .workshop-section {
            background: var(--bg-dark);
            color: var(--text-light);
            padding: 8rem 0;
        }

        .workshop-header {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
            margin-bottom: 6rem;
        }

        .workshop-header h2 {
            font-size: clamp(2.5rem, 4vw, 4rem);
            line-height: 1.05;
        }

        .timeline {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 2rem;
            border-top: 1px solid var(--border-dark);
            padding-top: 3rem;
        }

        .step-num {
            color: var(--accent-rust);
            margin-bottom: 1rem;
            display: block;
        }

        .timeline-step h3 {
            font-size: 1.5rem;
            margin-bottom: 1rem;
        }

        .timeline-step p {
            color: #9E9C94;
            font-size: 0.95rem;
            line-height: 1.6;
        }

        /* Footer */
        footer {
            background: var(--bg-primary);
            border-top: 1px solid var(--border-color);
            padding: 6rem 0 3rem 0;
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr 1fr;
            gap: 4rem;
            margin-bottom: 6rem;
        }

        .footer-brand h3 {
            font-size: 2rem;
            margin-bottom: 1rem;
        }

        .footer-brand p {
            color: var(--text-secondary);
            max-width: 30ch;
            margin-bottom: 2rem;
        }

        .footer-col h4 {
            margin-bottom: 1.5rem;
            color: var(--text-secondary);
        }

        .footer-col ul {
            list-style: none;
        }

        .footer-col li {
            margin-bottom: 0.75rem;
        }

        .footer-col a:hover {
            text-decoration: underline;
        }

        .footer-bottom {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-top: 1px solid var(--border-color);
            padding-top: 2rem;
            color: var(--text-secondary);
        }

        /* Modal */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(24, 24, 23, 0.8);
            backdrop-filter: blur(5px);
            z-index: 1000;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }

        .modal-overlay.active {
            opacity: 1;
            pointer-events: all;
        }

        .modal-content {
            background: var(--bg-primary);
            border: 1px solid var(--border-color);
            width: 100%;
            max-width: 650px;
            padding: 3.5rem;
            position: relative;
            transform: translateY(20px);
            transition: transform 0.3s ease;
            max-height: 90vh;
            overflow-y: auto;
        }

        .modal-overlay.active .modal-content {
            transform: translateY(0);
        }

        .modal-close {
            position: absolute;
            top: 1.5rem;
            right: 1.5rem;
            background: none;
            border: none;
            font-size: 1.5rem;
            padding: 0.5rem;
            cursor: pointer;
            color: var(--text-primary);
        }

        .modal-close:hover {
            background: transparent;
            color: var(--accent-rust);
        }

        .form-group {
            margin-bottom: 1.5rem;
        }

        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
        }

        .form-control {
            width: 100%;
            padding: 1rem;
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            font-family: var(--font-sans);
            font-size: 1rem;
            color: var(--text-primary);
        }

        .form-control:focus {
            outline: none;
            border-color: var(--text-primary);
        }

        .config-recap {
            background: var(--bg-secondary);
            padding: 1.25rem;
            border-left: 3px solid var(--accent-rust);
            margin: 1.5rem 0;
            font-size: 0.9rem;
        }

        /* SVG Animation & Styling */
        .cad-line {
            stroke-dasharray: 4 4;
            stroke: #9E998E;
            stroke-width: 1;
        }
        .dim-text {
            font-family: var(--font-mono);
            font-size: 11px;
            fill: #7A766E;
        }
        
        /* Responsive */
        @media (max-width: 1024px) {
            .hero-header, .editorial-grid, .config-workspace, .specs-grid, .workshop-header {
                grid-template-columns: 1fr;
                gap: 2.5rem;
            }
            .pillars {
                grid-template-columns: 1fr;
            }
            .timeline, .hero-stats, .footer-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            .config-stage {
                position: relative;
                top: 0;
            }
        }

        @media (max-width: 640px) {
            .nav-links { display: none; }
            .timeline, .hero-stats, .footer-grid, .color-options {
                grid-template-columns: 1fr;
            }
            .hero-svg-wrapper {
                aspect-ratio: 4/3;
            }
            .modal-content {
                padding: 2rem;
            }
        }
    </style>
</head>
<body>

    <!-- Navigation -->
    <header>
        <div class="container nav-bar">
            <a href="#" class="logo">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <circle cx="12" cy="12" r="10"/>
                    <line x1="12" y1="2" x2="12" y2="22"/>
                    <line x1="2" y1="12" x2="22" y2="12"/>
                    <circle cx="12" cy="12" r="4" fill="var(--bg-primary)"/>
                </svg>
                LUMEN CYCLES
            </a>
            <ul class="nav-links mono">
                <li><a href="#philosophy">Philosophy</a></li>
                <li><a href="#commission">Commission</a></li>
                <li><a href="#specifications">Specifications</a></li>
                <li><a href="#workshop">Refshaleøen Workshop</a></li>
            </ul>
            <a href="#commission" class="btn btn-primary">Configure Yours</a>
        </div>
    </header>

    <!-- Hero Section -->
    <section class="hero container">
        <div class="hero-header">
            <div>
                <div class="mono" style="color: var(--accent-rust); margin-bottom: 1rem;">MODEL 01 // LONG-JOHN OMNIUM</div>
                <h1 class="hero-title">Utility, elevated to architecture.</h1>
            </div>
            <div>
                <p class="hero-subtitle">Bespoke chromoly steel cargo bicycles. Fillet-brazed to order on Refshaleøen, Copenhagen. Engineered to replace your car and outlive its maker.</p>
                <div style="display: flex; gap: 1rem; align-items: center;">
                    <a href="#commission" class="btn btn-primary">Start a Commission</a>
                    <span class="mono" style="color: var(--text-secondary);">From €4,200</span>
                </div>
            </div>
        </div>

        <!-- Technical Blueprint Hero Illustration -->
        <div class="hero-visual">
            <div class="blueprint-meta mono">
                <span>SCALE: 1:10 // DWG NO. CPH-2025-L01</span>
                <span>55.6919° N, 12.6163° E</span>
            </div>
            <div class="hero-svg-wrapper">
                <svg viewBox="0 0 1100 440" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <!-- Grid & CAD Lines -->
                    <g opacity="0.5">
                        <line x1="0" y1="360" x2="1100" y2="360" stroke="#9E998E" stroke-width="1"/>
                        <!-- Wheelbase markers -->
                        <line x1="200" y1="260" x2="200" y2="420" class="cad-line"/>
                        <line x1="920" y1="295" x2="920" y2="420" class="cad-line"/>
                        <line x1="200" y1="405" x2="920" y2="405" stroke="#7A766E" stroke-width="1"/>
                        <circle cx="200" cy="405" r="3" fill="#7A766E"/>
                        <circle cx="920" cy="405" r="3" fill="#7A766E"/>
                        <text x="560" y="395" text-anchor="middle" class="dim-text">WHEELBASE: 1980 MM</text>

                        <!-- Total Length markers -->
                        <line x1="90" y1="260" x2="90" y2="435" class="cad-line"/>
                        <line x1="1000" y1="295" x2="1000" y2="435" class="cad-line"/>
                        <line x1="90" y1="430" x2="1000" y2="430" stroke="#7A766E" stroke-width="1"/>
                        <text x="545" y="423" text-anchor="middle" class="dim-text">OVERALL LENGTH: 2540 MM</text>

                        <!-- Head tube angle callout -->
                        <line x1="400" y1="70" x2="465" y2="310" class="cad-line"/>
                        <text x="390" y="55" class="dim-text">71.5° HTA / CABLE STEER</text>
                        
                        <!-- Cargo Bed Callout -->
                        <line x1="490" y1="150" x2="880" y2="150" stroke="#7A766E" stroke-width="1"/>
                        <line x1="490" y1="145" x2="490" y2="155" stroke="#7A766E" stroke-width="1"/>
                        <line x1="880" y1="145" x2="880" y2="155" stroke="#7A766E" stroke-width="1"/>
                        <text x="685" y="140" text-anchor="middle" class="dim-text">LOAD BAY: 820 MM (MAX 100 KG)</text>
                    </g>

                    <!-- REAR WHEEL (27.5") -->
                    <g id="hero-rear-wheel">
                        <!-- Spokes -->
                        <g stroke="#8C8881" stroke-width="1">
                            <line x1="200" y1="160" x2="200" y2="360"/><line x1="100" y1="260" x2="300" y2="260"/>
                            <line x1="129" y1="189" x2="271" y2="331"/><line x1="129" y1="331" x2="271" y2="189"/>
                            <line x1="162" y1="167" x2="238" y2="353"/><line x1="107" y1="222" x2="293" y2="298"/>
                            <line x1="107" y1="298" x2="293" y2="222"/><line x1="162" y1="353" x2="238" y2="167"/>
                        </g>
                        <!-- Brake Rotor -->
                        <circle cx="200" cy="260" r="28" stroke="#7A766E" stroke-width="2" stroke-dasharray="6 3"/>
                        <!-- Tire & Rim -->
                        <circle cx="200" cy="260" r="98" stroke="#181817" stroke-width="14"/>
                        <circle cx="200" cy="260" r="89" stroke="#C59B27" stroke-width="2" opacity="0.6"/> <!-- Tan wall hint -->
                        <circle cx="200" cy="260" r="86" stroke="#181817" stroke-width="3"/>
                        <!-- Rear Fender -->
                        <path d="M 88 260 A 112 112 0 0 1 295 198" stroke="#181817" stroke-width="4" stroke-linecap="round"/>
                        <line x1="200" y1="260" x2="105" y2="205" stroke="#5A5852" stroke-width="2"/>
                    </g>

                    <!-- FRONT WHEEL (20") -->
                    <g id="hero-front-wheel">
                        <!-- Spokes -->
                        <g stroke="#8C8881" stroke-width="1">
                            <line x1="920" y1="225" x2="920" y2="365"/><line x1="850" y1="295" x2="990" y2="295"/>
                            <line x1="870" y1="245" x2="970" y2="345"/><line x1="870" y1="345" x2="970" y2="245"/>
                            <line x1="893" y1="230" x2="947" y2="360"/><line x1="855" y1="268" x2="985" y2="322"/>
                        </g>
                        <!-- Brake Rotor -->
                        <circle cx="920" cy="295" r="24" stroke="#7A766E" stroke-width="2" stroke-dasharray="6 3"/>
                        <!-- Tire & Rim -->
                        <circle cx="920" cy="295" r="68" stroke="#181817" stroke-width="14"/>
                        <circle cx="920" cy="295" r="59" stroke="#C59B27" stroke-width="2" opacity="0.6"/>
                        <circle cx="920" cy="295" r="56" stroke="#181817" stroke-width="3"/>
                        <!-- Front Fender -->
                        <path d="M 842 310 A 80 80 0 0 1 975 235" stroke="#181817" stroke-width="4" stroke-linecap="round"/>
                        <line x1="920" y1="295" x2="852" y2="275" stroke="#5A5852" stroke-width="2"/>
                    </g>

                    <!-- WOODEN CARGO BOX (Hero Feature) -->
                    <g id="hero-cargo-box">
                        <!-- Side Panel (Baltic Birch / Ash) -->
                        <polygon points="462,285 480,175 885,188 855,285" fill="#DFC39D" stroke="#181817" stroke-width="2"/>
                        <!-- Wood Slats Detail -->
                        <line x1="474" y1="210" x2="878" y2="218" stroke="#B89972" stroke-width="1.5"/>
                        <line x1="468" y1="245" x2="867" y2="250" stroke="#B89972" stroke-width="1.5"/>
                        <!-- Structural Corner Brackets -->
                        <path d="M 480,175 L 495,175 L 477,285 L 462,285 Z" fill="#2A2927"/>
                        <path d="M 870,188 L 885,188 L 855,285 L 840,285 Z" fill="#2A2927"/>
                        <!-- Brass Rivets -->
                        <circle cx="485" cy="192" r="2" fill="#C59B27"/>
                        <circle cx="480" cy="227" r="2" fill="#C59B27"/>
                        <circle cx="474" cy="265" r="2" fill="#C59B27"/>
                        <circle cx="873" cy="203" r="2" fill="#C59B27"/>
                        <circle cx="863" cy="235" r="2" fill="#C59B27"/>
                        <circle cx="853" cy="268" r="2" fill="#C59B27"/>
                    </g>

                    <!-- DRIVETRAIN (Gates Carbon Belt) -->
                    <g id="hero-drivetrain">
                        <!-- Belt -->
                        <path d="M 200 246 L 370 258 L 370 302 L 200 274 Z" fill="none" stroke="#333330" stroke-width="4"/>
                        <!-- Rear Hub (Rohloff / Enviolo) -->
                        <circle cx="200" cy="260" r="18" fill="#181817" stroke="#5A5852" stroke-width="2"/>
                        <!-- Bottom Bracket / Motor Unit -->
                        <path d="M 345 275 C 345 255, 395 255, 405 280 C 405 305, 355 310, 345 275 Z" fill="#2A2927" stroke="#181817" stroke-width="2"/>
                        <circle cx="370" cy="280" r="22" fill="none" stroke="#7A766E" stroke-width="3" stroke-dasharray="4 2"/>
                        <circle cx="370" cy="280" r="8" fill="#C59B27"/>
                    </g>

                    <!-- CHROMOLY FRAME (Fillet Brazed Rust) -->
                    <g id="hero-frame" stroke="#B84A27" stroke-linecap="round" stroke-linejoin="round">
                        <!-- Rear Triangle -->
                        <line x1="200" y1="260" x2="370" y2="280" stroke-width="9"/> <!-- Chainstay -->
                        <line x1="200" y1="260" x2="338" y2="165" stroke-width="7"/> <!-- Seatstay -->
                        <!-- Seat Tube -->
                        <line x1="370" y1="280" x2="328" y2="130" stroke-width="11"/>
                        <!-- Top / Mid Tube -->
                        <path d="M 336 160 C 380 185, 410 215, 438 205" stroke-width="9" fill="none"/>
                        <!-- Main Spine (Under-bed) -->
                        <path d="M 370 280 L 455 290 L 860 290 L 908 195" stroke-width="14" fill="none"/>
                        <!-- Steerer Column (Rear) -->
                        <line x1="455" y1="290" x2="422" y2="125" stroke-width="11"/>
                        <!-- Down-tube reinforcement gusset -->
                        <path d="M 390 282 L 442 225 L 455 290 Z" fill="#B84A27" stroke="none"/>
                        <!-- Head Tube (Front) -->
                        <line x1="898" y1="170" x2="914" y2="225" stroke-width="12"/>
                        <!-- Front Fork -->
                        <path d="M 908 205 L 920 295" stroke-width="10"/>
                        <!-- Cargo Bed Steel Perimeter Rail -->
                        <path d="M 442 200 L 895 200" stroke="#181817" stroke-width="5"/>
                    </g>

                    <!-- COCKPIT, SADDLE & DETAILS -->
                    <g id="hero-cockpit">
                        <!-- Seatpost -->
                        <line x1="328" y1="130" x2="315" y2="85" stroke="#181817" stroke-width="7"/>
                        <!-- Brass Seat Clamp -->
                        <rect x="321" y="124" width="14" height="6" transform="rotate(-16 328 127)" fill="#C59B27"/>
                        <!-- Brooks-style Leather Saddle -->
                        <path d="M 280 85 C 295 85, 330 88, 345 78 C 340 92, 315 98, 285 95 Z" fill="#3A2314" stroke="#181817" stroke-width="1.5"/>
                        <circle cx="286" cy="90" r="1.5" fill="#C59B27"/>
                        <circle cx="338" cy="82" r="1.5" fill="#C59B27"/>

                        <!-- Stem & Swept-back Handlebars -->
                        <path d="M 422 125 L 412 75 L 430 68" stroke="#181817" stroke-width="7" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
                        <path d="M 430 68 C 415 68, 395 75, 375 82" stroke="#181817" stroke-width="6" stroke-linecap="round" fill="none"/>
                        <!-- Leather Grips -->
                        <line x1="395" y1="75" x2="372" y2="83" stroke="#3A2314" stroke-width="8" stroke-linecap="round"/>

                        <!-- Supernova Headlight -->
                        <g transform="translate(912, 185)">
                            <rect x="0" y="0" width="14" height="10" rx="2" fill="#181817"/>
                            <line x1="14" y1="2" x2="14" y2="8" stroke="#C59B27" stroke-width="2"/>
                            <!-- Light beam hint -->
                            <polygon points="16,2 90,-15 90,35 16,8" fill="url(#beam-grad)" opacity="0.25"/>
                        </g>
                        
                        <!-- Center Kickstand (Deployed) -->
                        <line x1="475" y1="292" x2="455" y2="360" stroke="#181817" stroke-width="6" stroke-linecap="round"/>
                        <circle cx="475" cy="292" r="4" fill="#C59B27"/>
                    </g>

                    <defs>
                        <linearGradient id="beam-grad" x1="0" y1="0" x2="1" y2="0">
                            <stop offset="0%" stop-color="#C59B27"/>
                            <stop offset="100%" stop-color="#C59B27" stop-opacity="0"/>
                        </linearGradient>
                    </defs>
                </svg>
            </div>
        </div>

        <div class="hero-stats">
            <div class="stat-item">
                <h4 class="mono">TUBING</h4>
                <p>Reynolds 853 & Columbus Zona</p>
            </div>
            <div class="stat-item">
                <h4 class="mono">PAYLOAD CAPACITY</h4>
                <p>100 kg Bay + 120 kg Rider</p>
            </div>
            <div class="stat-item">
                <h4 class="mono">STEERING</h4>
                <p>Dual-Redundant Dyneema Cable</p>
            </div>
            <div class="stat-item">
                <h4 class="mono">LEAD TIME</h4>
                <p>6 Weeks, Built to Measure</p>
            </div>
        </div>
    </section>

    <!-- Philosophy / Editorial Section -->
    <section id="philosophy" class="editorial">
        <div class="container editorial-grid">
            <div>
                <div class="section-label mono">01 // THE ARCHITECTURE OF UTILITY</div>
                <p style="margin-top: 2rem; color: var(--text-secondary); font-size: 0.95rem; max-width: 30ch;">
                    Copenhagen does not forgive fragile machinery. Salt air, cobblestones, and year-round rain demand an uncompromising standard of metallurgic and mechanical honesty.
                </p>
            </div>
            <div class="editorial-content">
                <h2>Most cargo bikes are stamped from aluminum in distant factories and glued together for a five-year lifecycle. We build heirloom steel machines designed for thirty.</h2>
                
                <div class="pillars">
                    <div class="pillar-card">
                        <svg viewBox="0 0 48 48">
                            <path d="M8 40 L40 8 M16 8 L40 8 L40 32"/>
                            <circle cx="18" cy="30" r="8"/>
                            <path d="M12 24 C18 24, 24 18, 24 12"/>
                        </svg>
                        <h3>Fillet-Brazed Chromoly</h3>
                        <p>Every junction is hand-mitered and silver-brazed at low temperatures in our Refshaleøen workshop, preserving tube strength and creating seamless, flowing joints that absorb road chatter.</p>
                    </div>
                    <div class="pillar-card">
                        <svg viewBox="0 0 48 48">
                            <circle cx="24" cy="24" r="18" stroke-dasharray="4 4"/>
                            <circle cx="24" cy="24" r="10"/>
                            <line x1="24" y1="2" x2="24" y2="14"/>
                            <line x1="24" y1="34" x2="24" y2="46"/>
                        </svg>
                        <h3>Zero-Creak Cable Steer</h3>
                        <p>Rejecting clunky linkage rods, our sealed pulley steering system offers an 85-degree turning radius. Maneuver tight courtyard bike racks with the agility of a standard commuter.</p>
                    </div>
                    <div class="pillar-card">
                        <svg viewBox="0 0 48 48">
                            <rect x="6" y="14" width="36" height="20" rx="10"/>
                            <circle cx="16" cy="24" r="4"/>
                            <circle cx="32" cy="24" r="4"/>
                            <line x1="16" y1="20" x2="32" y2="20"/>
                            <line x1="16" y1="28" x2="32" y2="28"/>
                        </svg>
                        <h3>Weatherproof Drivetrain</h3>
                        <p>Grease attracts grit. Every Lumen is built exclusively around a Gates Carbon Drive belt and fully sealed internal gear hubs. Silent, oil-free, and impervious to Danish winters.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Interactive Configurator Section -->
    <section id="commission" class="configurator-section">
        <div class="container">
            <div class="config-header">
                <div>
                    <div class="section-label mono" style="margin-bottom: 1rem;">02 // BESPOKE COMMISSION</div>
                    <h2>Configure Model 01</h2>
                </div>
                <div class="mono" style="color: var(--text-secondary);">
                    NEXT PRODUCTION SLOT: <strong style="color: var(--text-primary);">BATCH #14 (4 WEEKS)</strong>
                </div>
            </div>

            <div class="config-workspace">
                <!-- Left: Sticky Interactive Stage -->
                <div class="config-stage">
                    <div class="blueprint-meta mono">
                        <span id="stage-config-code">SPEC: L01-RST-BOX-ACO</span>
                        <span>EST. WEIGHT: <strong id="stage-weight">21.4 KG</strong></span>
                    </div>
                    
                    <div class="stage-canvas">
                        <!-- Dynamic SVG updated via JS -->
                        <svg viewBox="0 0 900 420" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <!-- Ground shadow -->
                            <ellipse cx="460" cy="375" rx="410" ry="8" fill="#E0DBD0"/>

                            <!-- REAR WHEEL -->
                            <g>
                                <g stroke="#9E998E" stroke-width="1">
                                    <line x1="160" y1="180" x2="160" y2="365"/><line x1="68" y1="272" x2="252" y2="272"/>
                                    <line x1="95" y1="207" x2="225" y2="337"/><line x1="95" y1="337" x2="225" y2="207"/>
                                </g>
                                <circle cx="160" cy="272" r="24" stroke="#7A766E" stroke-width="2"/>
                                <circle cx="160" cy="272" r="90" stroke="#181817" stroke-width="13"/>
                                <circle cx="160" cy="272" r="82" stroke="#C59B27" stroke-width="2" opacity="0.7"/>
                                <circle cx="160" cy="272" r="79" stroke="#181817" stroke-width="3"/>
                                <path d="M 58 272 A 102 102 0 0 1 248 216" stroke="#181817" stroke-width="4" stroke-linecap="round"/>
                            </g>

                            <!-- FRONT WHEEL -->
                            <g>
                                <g stroke="#9E998E" stroke-width="1">
                                    <line x1="780" y1="242" x2="780" y2="365"/><line x1="718" y1="304" x2="842" y2="304"/>
                                    <line x1="736" y1="260" x2="824" y2="348"/><line x1="736" y1="348" x2="824" y2="260"/>
                                </g>
                                <circle cx="780" cy="304" r="20" stroke="#7A766E" stroke-width="2"/>
                                <circle cx="780" cy="304" r="62" stroke="#181817" stroke-width="13"/>
                                <circle cx="780" cy="304" r="54" stroke="#C59B27" stroke-width="2" opacity="0.7"/>
                                <circle cx="780" cy="304" r="51" stroke="#181817" stroke-width="3"/>
                                <path d="M 708 316 A 74 74 0 0 1 832 250" stroke="#181817" stroke-width="4" stroke-linecap="round"/>
                            </g>

                            <!-- DYNAMIC MODULES: CARGO BAY -->
                            <!-- Option 1: Flatbed -->
                            <g id="svg-mod-flatbed" style="display: none;">
                                <rect x="395" y="280" width="340" height="8" fill="#2A2927"/>
                                <line x1="415" y1="280" x2="415" y2="270" stroke="#C59B27" stroke-width="3"/>
                                <line x1="565" y1="280" x2="565" y2="270" stroke="#C59B27" stroke-width="3"/>
                                <line x1="715" y1="280" x2="715" y2="270" stroke="#C59B27" stroke-width="3"/>
                            </g>

                            <!-- Option 2: Ash & Birch Box (Default) -->
                            <g id="svg-mod-box">
                                <polygon points="390,288 408,185 752,198 725,288" fill="#DFC39D" stroke="#181817" stroke-width="2"/>
                                <line x1="402" y1="218" x2="745" y2="226" stroke="#B89972" stroke-width="1.5"/>
                                <line x1="396" y1="252" x2="735" y2="257" stroke="#B89972" stroke-width="1.5"/>
                                <path d="M 408,185 L 422,185 L 404,288 L 390,288 Z" fill="#2A2927"/>
                                <path d="M 738,198 L 752,198 L 725,288 L 711,288 Z" fill="#2A2927"/>
                                <!-- Child bench hint inside -->
                                <path d="M 425,185 L 445,165 L 460,165 L 450,186 Z" fill="#3A2314"/>
                            </g>

                            <!-- Option 3: All-Weather Canopy -->
                            <g id="svg-mod-canopy" style="display: none;">
                                <!-- Base box -->
                                <polygon points="390,288 408,185 752,198 725,288" fill="#DFC39D" stroke="#181817" stroke-width="2"/>
                                <line x1="402" y1="218" x2="745" y2="226" stroke="#B89972" stroke-width="1.5"/>
                                <path d="M 408,185 L 422,185 L 404,288 L 390,288 Z" fill="#2A2927"/>
                                <path d="M 738,198 L 752,198 L 725,288 L 711,288 Z" fill="#2A2927"/>
                                <!-- Canvas & Clear Window Canopy -->
                                <path d="M 408,185 C 415,90 560,85 752,198 Z" fill="#2A2927" fill-opacity="0.9" stroke="#181817" stroke-width="2"/>
                                <path d="M 435,172 C 445,115 550,112 690,182 Z" fill="#EBE6DC" fill-opacity="0.6" stroke="#C59B27" stroke-width="1"/>
                                <path d="M 550,115 L 535,178" stroke="#181817" stroke-width="2"/>
                            </g>

                            <!-- DYNAMIC MODULE: MOTOR & BATTERY -->
                            <g id="svg-mod-motor" style="display: none;">
                                <!-- Under-deck battery pack -->
                                <rect x="440" y="299" width="210" height="18" rx="3" fill="#181817" stroke="#5A5852" stroke-width="1"/>
                                <circle cx="455" cy="308" r="2" fill="#4CAF50"/>
                                <circle cx="463" cy="308" r="2" fill="#4CAF50"/>
                                <circle cx="471" cy="308" r="2" fill="#4CAF50"/>
                                <!-- Mid-drive motor housing -->
                                <path d="M 285 285 C 285 262, 340 262, 350 290 C 350 318, 295 322, 285 285 Z" fill="#181817"/>
                            </g>

                            <!-- DRIVETRAIN BASE -->
                            <g>
                                <path d="M 160 260 L 312 272 L 312 308 L 160 284 Z" fill="none" stroke="#333330" stroke-width="3.5"/>
                                <circle cx="160" cy="272" r="15" fill="#181817" stroke="#7A766E" stroke-width="2"/>
                            </g>

                            <!-- DYNAMIC FRAME COLOR -->
                            <g id="svg-frame-group" stroke="#B84A27" stroke-linecap="round" stroke-linejoin="round">
                                <line x1="160" y1="272" x2="312" y2="290" stroke-width="8"/>
                                <line x1="160" y1="272" x2="282" y2="180" stroke-width="6"/>
                                <line x1="312" y1="290" x2="274" y2="148" stroke-width="10"/>
                                <path d="M 280 175 C 320 198, 348 225, 375 215" stroke-width="8" fill="none"/>
                                <path d="M 312 290 L 388 295 L 730 295 L 770 210" stroke-width="13" fill="none"/>
                                <line x1="388" y1="295" x2="358" y2="140" stroke-width="10"/>
                                <path id="svg-frame-gusset" d="M 330 292 L 376 238 L 388 295 Z" fill="#B84A27" stroke="none"/>
                                <line x1="760" y1="185" x2="774" y2="238" stroke-width="11"/>
                                <path d="M 768 218 L 780 304" stroke-width="9"/>
                                <path d="M 378 210 L 758 210" stroke="#181817" stroke-width="4"/>
                            </g>

                            <!-- Crankset overlay -->
                            <circle cx="312" cy="290" r="18" fill="#2A2927" stroke="#C59B27" stroke-width="2"/>
                            <line x1="312" y1="290" x2="312" y2="318" stroke="#181817" stroke-width="5" stroke-linecap="round"/>
                            <rect x="302" y="315" width="20" height="5" fill="#C59B27"/>

                            <!-- COCKPIT & SADDLE -->
                            <g>
                                <line x1="274" y1="148" x2="262" y2="105" stroke="#181817" stroke-width="6"/>
                                <path d="M 230 105 C 245 105, 275 108, 290 98 C 285 112, 262 118, 235 115 Z" fill="#3A2314"/>
                                <path d="M 358 140 L 348 92 L 365 85 C 350 85, 332 92, 315 98" stroke="#181817" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
                                <line x1="332" y1="92" x2="312" y2="99" stroke="#3A2314" stroke-width="8" stroke-linecap="round"/>
                                <!-- Kickstand -->
                                <line x1="405" y1="296" x2="388" y2="365" stroke="#181817" stroke-width="5" stroke-linecap="round"/>
                            </g>
                        </svg>
                    </div>

                    <div class="stage-footer">
                        <div class="swatch-preview">
                            <span class="swatch-dot" id="active-swatch-dot" style="background: #B84A27;"></span>
                            <span class="mono" id="active-color-name">Copenhagen Rust (RAL 8004)</span>
                        </div>
                        <div class="mono" style="color: var(--text-secondary);">POWDER COAT // MATTE FINISH</div>
                    </div>
                </div>

                <!-- Right: Controls -->
                <div class="config-controls">
                    
                    <!-- Step 1: Frame Finish -->
                    <div class="control-group">
                        <div class="control-header">
                            <span class="control-title">01. Frame Powder Coat</span>
                            <span class="mono" style="color: var(--text-secondary);">INCLUDED</span>
                        </div>
                        <div class="color-options">
                            <button class="color-btn active" data-color="#B84A27" data-name="Copenhagen Rust (RAL 8004)" data-code="RST">
                                <span class="circle" style="background: #B84A27;"></span>
                                <span class="mono" style="font-size: 0.65rem;">Rust</span>
                            </button>
                            <button class="color-btn" data-color="#24382C" data-name="Øresund Pine (RAL 6009)" data-code="PIN">
                                <span class="circle" style="background: #24382C;"></span>
                                <span class="mono" style="font-size: 0.65rem;">Pine</span>
                            </button>
                            <button class="color-btn" data-color="#222324" data-name="Raw Phosphated Slate" data-code="SLT">
                                <span class="circle" style="background: #222324;"></span>
                                <span class="mono" style="font-size: 0.65rem;">Slate</span>
                            </button>
                            <button class="color-btn" data-color="#D5CFC2" data-name="Skagen Chalk (RAL 1013)" data-code="CHK">
                                <span class="circle" style="background: #D5CFC2;"></span>
                                <span class="mono" style="font-size: 0.65rem;">Chalk</span>
                            </button>
                        </div>
                    </div>

                    <!-- Step 2: Cargo Architecture -->
                    <div class="control-group">
                        <div class="control-header">
                            <span class="control-title">02. Cargo Bay Architecture</span>
                        </div>
                        <div class="radio-options" id="cargo-options">
                            <div class="radio-card" data-cargo="flatbed" data-price="0" data-weight="0" data-code="FLT" data-label="Utility Flatbed">
                                <div class="radio-info">
                                    <h4>Utility Flatbed + Brass Lashing Points</h4>
                                    <p>Aircraft-grade aluminum deck with anti-slip marine coating.</p>
                                </div>
                                <div class="radio-price">Included</div>
                            </div>
                            <div class="radio-card active" data-cargo="box" data-price="380" data-weight="4.2" data-code="BOX" data-label="Marine Birch & Ash Box">
                                <div class="radio-info">
                                    <h4>Marine Birch & Steam-Bent Ash Box</h4>
                                    <p>Includes removable two-child bench with 5-point Fidlock harnesses.</p>
                                </div>
                                <div class="radio-price">+ €380</div>
                            </div>
                            <div class="radio-card" data-cargo="canopy" data-price="690" data-weight="5.8" data-code="CNP" data-label="Expedition Box + Canopy">
                                <div class="radio-info">
                                    <h4>Expedition Box + All-Weather Canopy</h4>
                                    <p>Wood box paired with Waxed Scottish Halley Stevensons canvas hood.</p>
                                </div>
                                <div class="radio-price">+ €690</div>
                            </div>
                        </div>
                    </div>

                    <!-- Step 3: Propulsion & Drivetrain -->
                    <div class="control-group" style="border-bottom: none; padding-bottom: 0;">
                        <div class="control-header">
                            <span class="control-title">03. Drivetrain & Assist</span>
                        </div>
                        <div class="radio-options" id="drive-options">
                            <div class="radio-card active" data-drive="acoustic" data-price="0" data-weight="0" data-code="ACO" data-label="Acoustic / Alfine 11">
                                <div class="radio-info">
                                    <h4>Acoustic // Shimano Alfine 11 + Gates Belt</h4>
                                    <p>Pure mechanical efficiency. 409% gear range, oil-bathed internal hub.</p>
                                </div>
                                <div class="radio-price">Included</div>
                            </div>
                            <div class="radio-card" data-drive="rohloff" data-price="950" data-weight="0.4" data-code="ROH" data-label="Acoustic / Rohloff 14">
                                <div class="radio-info">
                                    <h4>Acoustic // Rohloff Speedhub 500/14 + Gates Belt</h4>
                                    <p>The benchmark of expedition gearing. Hand-built in Germany, 526% range.</p>
                                </div>
                                <div class="radio-price">+ €950</div>
                            </div>
                            <div class="radio-card" data-drive="electric" data-price="1450" data-weight="6.5" data-code="EP8" data-label="Electric / Shimano EP8 Cargo">
                                <div class="radio-info">
                                    <h4>Electric Assist // Shimano EP8 Cargo + Enviolo HD</h4>
                                    <p>85Nm torque mid-drive motor, stepless hub, 630Wh under-deck battery.</p>
                                </div>
                                <div class="radio-price">+ €1,450</div>
                            </div>
                        </div>
                    </div>

                    <!-- Summary & Action -->
                    <div class="summary-box">
                        <div class="mono" style="color: var(--accent-brass); margin-bottom: 1rem;">BUILD SUMMARY</div>
                        <div class="summary-row">
                            <span>Lumen Model 01 Base Chassis</span>
                            <span class="mono">€3,820</span>
                        </div>
                        <div class="summary-row">
                            <span id="sum-color">Finish: Copenhagen Rust</span>
                            <span class="mono">€0</span>
                        </div>
                        <div class="summary-row">
                            <span id="sum-cargo">Cargo: Marine Birch & Ash Box</span>
                            <span class="mono" id="sum-cargo-price">€380</span>
                        </div>
                        <div class="summary-row">
                            <span id="sum-drive">Drive: Acoustic / Alfine 11</span>
                            <span class="mono" id="sum-drive-price">€0</span>
                        </div>
                        
                        <div class="summary-total">
                            <div>
                                <span class="mono" style="display: block; color: #A09E97;">TOTAL ESTIMATE (INCL. 25% DANISH VAT)</span>
                                <span class="mono" style="font-size: 0.7rem; color: #7A766E;">€500 refundable deposit required to lock build slot</span>
                            </div>
                            <div class="total-price" id="sum-total">€4,200</div>
                        </div>

                        <button class="btn btn-primary" id="open-modal-btn">Reserve Production Slot</button>
                    </div>

                </div>
            </div>
        </div>
    </section>

    <!-- Technical Specifications -->
    <section id="specifications" class="specs-section container">
        <div class="specs-grid">
            <div>
                <div class="section-label mono">03 // COMPONENT LEDGER</div>
                <h2 style="font-size: 2.75rem; margin-top: 1rem; line-height: 1.1;">No proprietary traps.</h2>
                <p style="margin-top: 1.5rem; color: var(--text-secondary);">
                    We refuse to design custom plastic parts that become obsolete in three years. Every bearing, caliper, and spoke on a Lumen is serviceable by any competent mechanic in the world.
                </p>
            </div>
            <div>
                <table class="spec-table">
                    <tbody>
                        <tr>
                            <th>Frame & Fork</th>
                            <td>Double-butted Reynolds 853 main spine, Columbus Zona rear triangle. Silver fillet-brazed by hand. Internal anti-corrosion ED coating prior to powder coat.</td>
                        </tr>
                        <tr>
                            <th>Braking System</th>
                            <td>Magura MT5 4-piston hydraulic disc brakes front and rear. 203mm floating storm rotors for fade-free stopping with 100kg loads.</td>
                        </tr>
                        <tr>
                            <th>Wheels & Tires</th>
                            <td>Hand-laced in house. 27.5" rear / 20" front DT Swiss HU 1900 Cargo rims (36H). Schwalbe Pick-Up Super Defense puncture-resistant cargo tires.</td>
                        </tr>
                        <tr>
                            <th>Lighting & Dynamo</th>
                            <td>SON 28 front dynamo hub (or direct e-bike battery integration) powering a Supernova M99 Mini Pro headlight and fender-integrated tail light.</td>
                        </tr>
                        <tr>
                            <th>Contact Points</th>
                            <td>Brooks Cambium C17 vulcanized natural rubber saddle (weatherproof). Ergon cork-composite swept grips. CNC-machined platform pedals.</td>
                        </tr>
                        <tr>
                            <th>Geometry & Fit</th>
                            <td>Adaptive cockpit fits riders from 158cm to 198cm via quick-release seatpost and adjustable stem. Custom frame sizing available upon request.</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </section>

    <!-- The Workshop / Process -->
    <section id="workshop" class="workshop-section">
        <div class="container">
            <div class="workshop-header">
                <div>
                    <div class="section-label mono" style="color: var(--accent-brass);">04 // REFSHALEØEN WORKSHOP</div>
                    <h2 style="margin-top: 1rem;">Built in a former shipyard, three kilometers from Nyhavn.</h2>
                </div>
                <div style="display: flex; flex-direction: column; justify-content: flex-end;">
                    <p style="color: #9E9C94; font-size: 1.1rem; max-width: 45ch;">
                        We build forty-five bicycles a year. We do not have dealers, middlemen, or seasonal model years. When you commission a Lumen, you speak directly to the framebuilder holding the torch.
                    </p>
                </div>
            </div>

            <div class="timeline">
                <div class="timeline-step">
                    <span class="mono step-num">WEEK 01 // CONSULTATION</span>
                    <h3>Sizing & Ergonomics</h3>
                    <p>Visit us on Refshalevej for espresso and a test ride, or complete a remote biomechanical fit session. We finalize your tubing gauge, cockpit reach, and cargo requirements.</p>
                </div>
                <div class="timeline-step">
                    <span class="mono step-num">WEEK 02–03 // FABRICATION</span>
                    <h3>Miter & Torch</h3>
                    <p>Tubes are cut, mitered to hundredths of a millimeter, and locked into our precision jig. Brass and silver filler metals are flowed by hand to create organic, stress-relieved fillets.</p>
                </div>
                <div class="timeline-step">
                    <span class="mono step-num">WEEK 04–05 // FINISHING</span>
                    <h3>Coat & Joinery</h3>
                    <p>While the frame receives its zinc-phosphate bath and industrial powder coat, our cabinetmaker steam-bends the Danish ash rails and finishes the marine birch panels with raw tung oil.</p>
                </div>
                <div class="timeline-step">
                    <span class="mono step-num">WEEK 06 // HANDOVER</span>
                    <h3>Assembly & Shakedown</h3>
                    <p>Wheels are tensioned and trued by hand. Every bolt is torqued and logged. Your bike undergoes a 30km loaded test ride around Amager before handover or crated EU freight.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer>
        <div class="container">
            <div class="footer-grid">
                <div class="footer-brand">
                    <h3 class="serif">Lumen Cycles ApS</h3>
                    <p>Bespoke utility bicycles engineered and hand-built in Copenhagen, Denmark.</p>
                    <div class="mono" style="color: var(--text-primary);">CVR: DK-41928374</div>
                </div>
                <div class="footer-col">
                    <h4 class="mono">Workshop</h4>
                    <p style="font-size: 0.95rem; line-height: 1.7;">
                        Refshalevej 163A, Hal 4<br>
                        1432 København K<br>
                        Denmark
                    </p>
                    <p class="mono" style="margin-top: 1rem; color: var(--accent-rust);">Open by appointment</p>
                </div>
                <div class="footer-col">
                    <h4 class="mono">Inquiries</h4>
                    <ul>
                        <li><a href="mailto:atelier@lumencycles.dk">atelier@lumencycles.dk</a></li>
                        <li><a href="tel:+4531428890">+45 31 42 88 90</a></li>
                        <li style="margin-top: 1rem;"><a href="#commission" class="mono" style="text-decoration: underline;">Book Test Ride →</a></li>
                    </ul>
                </div>
                <div class="footer-col">
                    <h4 class="mono">Guarantee</h4>
                    <p style="font-size: 0.9rem; color: var(--text-secondary);">
                        Every Lumen frame and fork carries a 25-year structural warranty for the original owner, backed by our crash-replacement repair program.
                    </p>
                </div>
            </div>

            <div class="footer-bottom mono">
                <span>© 2025 LUMEN CYCLES APS. ALL RIGHTS RESERVED.</span>
                <span>HANDCRAFTED IN COPENHAGEN // EU SHIPPING AVAILABLE</span>
            </div>
        </div>
    </footer>

    <!-- Commission Modal -->
    <div class="modal-overlay" id="commission-modal">
        <div class="modal-content">
            <button class="modal-close" id="close-modal-btn" aria-label="Close modal">&times;</button>
            <div class="mono" style="color: var(--accent-rust); margin-bottom: 0.5rem;">PRODUCTION SLOT RESERVATION</div>
            <h2 style="font-size: 2.2rem; margin-bottom: 0.5rem;">Initiate Commission</h2>
            <p style="color: var(--text-secondary); font-size: 0.95rem;">
                No payment is taken today. Submitting this dossier assigns your build to master framebuilder Soren Lindqvist, who will contact you within 24 hours to review sizing and issue your build contract.
            </p>

            <div class="config-recap" id="modal-recap">
                <!-- Populated by JS -->
            </div>

            <form id="commission-form">
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
                    <div class="form-group">
                        <label class="mono" for="client-name">Full Name *</label>
                        <input type="text" id="client-name" class="form-control" required placeholder="Freja Mikkelsen">
                    </div>
                    <div class="form-group">
                        <label class="mono" for="client-email">Email Address *</label>
                        <input type="email" id="client-email" class="form-control" required placeholder="freja@domain.dk">
                    </div>
                </div>
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
                    <div class="form-group">
                        <label class="mono" for="client-city">City & Country *</label>
                        <input type="text" id="client-city" class="form-control" required placeholder="Copenhagen, Denmark">
                    </div>
                    <div class="form-group">
                        <label class="mono" for="client-height">Rider Height (cm)</label>
                        <input type="number" id="client-height" class="form-control" placeholder="178">
                    </div>
                </div>
                <div class="form-group">
                    <label class="mono" for="client-notes">Bespoke Requests / Cargo Needs</label>
                    <textarea id="client-notes" class="form-control" rows="2" placeholder="e.g., Transporting two children (ages 3 & 6), dynamo USB charger, custom RAL color..."></textarea>
                </div>
                <button type="submit" class="btn btn-primary" style="width: 100%;">Submit Commission Dossier</button>
            </form>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            // State
            const state = {
                basePrice: 3820,
                baseWeight: 17.2,
                color: {
                    hex: '#B84A27',
                    name: 'Copenhagen Rust (RAL 8004)',
                    code: 'RST'
                },
                cargo: {
                    type: 'box',
                    label: 'Marine Birch & Ash Box',
                    price: 380,
                    weight: 4.2,
                    code: 'BOX'
                },
                drive: {
                    type: 'acoustic',
                    label: 'Acoustic / Alfine 11',
                    price: 0,
                    weight: 0,
                    code: 'ACO'
                }
            };

            // DOM Elements
            const svgFrameGroup = document.getElementById('svg-frame-group');
            const svgFrameGusset = document.getElementById('svg-frame-gusset');
            const svgModFlatbed = document.getElementById('svg-mod-flatbed');
            const svgModBox = document.getElementById('svg-mod-box');
            const svgModCanopy = document.getElementById('svg-mod-canopy');
            const svgModMotor = document.getElementById('svg-mod-motor');

            const activeSwatchDot = document.getElementById('active-swatch-dot');
            const activeColorName = document.getElementById('active-color-name');
            const stageConfigCode = document.getElementById('stage-config-code');
            const stageWeight = document.getElementById('stage-weight');

            const sumColor = document.getElementById('sum-color');
            const sumCargo = document.getElementById('sum-cargo');
            const sumCargoPrice = document.getElementById('sum-cargo-price');
            const sumDrive = document.getElementById('sum-drive');
            const sumDrivePrice = document.getElementById('sum-drive-price');
            const sumTotal = document.getElementById('sum-total');

            // Render UI Updates
            function updateConfigurator() {
                // 1. Update SVG Frame Color
                svgFrameGroup.setAttribute('stroke', state.color.hex);
                svgFrameGusset.setAttribute('fill', state.color.hex);
                activeSwatchDot.style.backgroundColor = state.color.hex;
                activeColorName.textContent = state.color.name;

                // 2. Update SVG Cargo Module
                svgModFlatbed.style.display = state.cargo.type === 'flatbed' ? 'block' : 'none';
                svgModBox.style.display = state.cargo.type === 'box' ? 'block' : 'none';
                svgModCanopy.style.display = state.cargo.type === 'canopy' ? 'block' : 'none';

                // 3. Update SVG Drivetrain Module
                svgModMotor.style.display = state.drive.type === 'electric' ? 'block' : 'none';

                // 4. Calculate Totals
                const totalPrice = state.basePrice + state.cargo.price + state.drive.price;
                const totalWeight = (state.baseWeight + state.cargo.weight + state.drive.weight).toFixed(1);

                // 5. Update Text & Summary
                stageConfigCode.textContent = `SPEC: L01-${state.color.code}-${state.cargo.code}-${state.drive.code}`;
                stageWeight.textContent = `${totalWeight} KG`;

                sumColor.textContent = `Finish: ${state.color.name.split(' (')[0]}`;
                sumCargo.textContent = `Cargo: ${state.cargo.label}`;
                sumCargoPrice.textContent = `€${state.cargo.price.toLocaleString()}`;
                sumDrive.textContent = `Drive: ${state.drive.label}`;
                sumDrivePrice.textContent = `€${state.drive.price.toLocaleString()}`;
                sumTotal.textContent = `€${totalPrice.toLocaleString()}`;
            }

            // Event Listeners: Color Buttons
            const colorBtns = document.querySelectorAll('.color-btn');
            colorBtns.forEach(btn => {
                btn.addEventListener('click', () => {
                    colorBtns.forEach(b => b.classList.remove('active'));
                    btn.classList.add('active');
                    state.color.hex = btn.dataset.color;
                    state.color.name = btn.dataset.name;
                    state.color.code = btn.dataset.code;
                    updateConfigurator();
                });
            });

            // Event Listeners: Cargo Options
            const cargoCards = document.querySelectorAll('#cargo-options .radio-card');
            cargoCards.forEach(card => {
                card.addEventListener('click', () => {
                    cargoCards.forEach(c => c.classList.remove('active'));
                    card.classList.add('active');
                    state.cargo.type = card.dataset.cargo;
                    state.cargo.price = parseInt(card.dataset.price, 10);
                    state.cargo.weight = parseFloat(card.dataset.weight);
                    state.cargo.code = card.dataset.code;
                    state.cargo.label = card.dataset.label;
                    updateConfigurator();
                });
            });

            // Event Listeners: Drive Options
            const driveCards = document.querySelectorAll('#drive-options .radio-card');
            driveCards.forEach(card => {
                card.addEventListener('click', () => {
                    driveCards.forEach(c => c.classList.remove('active'));
                    card.classList.add('active');
                    state.drive.type = card.dataset.drive;
                    state.drive.price = parseInt(card.dataset.price, 10);
                    state.drive.weight = parseFloat(card.dataset.weight);
                    state.drive.code = card.dataset.code;
                    state.drive.label = card.dataset.label;
                    updateConfigurator();
                });
            });

            // Modal Logic
            const modal = document.getElementById('commission-modal');
            const openModalBtn = document.getElementById('open-modal-btn');
            const closeModalBtn = document.getElementById('close-modal-btn');
            const modalRecap = document.getElementById('modal-recap');
            const commissionForm = document.getElementById('commission-form');

            openModalBtn.addEventListener('click', () => {
                const totalPrice = state.basePrice + state.cargo.price + state.drive.price;
                modalRecap.innerHTML = `
                    <div class="mono" style="margin-bottom: 0.4rem; color: var(--text-primary);"><strong>SELECTED SPECIFICATION (${stageConfigCode.textContent})</strong></div>
                    <div>• <strong>Frame:</strong> ${state.color.name}</div>
                    <div>• <strong>Cargo Bay:</strong> ${state.cargo.label}</div>
                    <div>• <strong>Drivetrain:</strong> ${state.drive.label}</div>
                    <div style="margin-top: 0.5rem; font-weight: 600;">Estimated Total: €${totalPrice.toLocaleString()} (incl. VAT)</div>
                `;
                modal.classList.add('active');
            });

            closeModalBtn.addEventListener('click', () => {
                modal.classList.remove('active');
            });

            modal.addEventListener('click', (e) => {
                if (e.target === modal) modal.classList.remove('active');
            });

            commissionForm.addEventListener('submit', (e) => {
                e.preventDefault();
                const name = document.getElementById('client-name').value;
                const modalContent = modal.querySelector('.modal-content');
                modalContent.innerHTML = `
                    <div class="mono" style="color: var(--accent-forest); margin-bottom: 1rem;">DOSSIER LOGGED // REF #CPH-${Math.floor(1000 + Math.random() * 9000)}</div>
                    <h2 style="font-size: 2.2rem; margin-bottom: 1rem;">Tak, ${name}.</h2>
                    <p style="color: var(--text-secondary); margin-bottom: 2rem; line-height: 1.6;">
                        Your specification has been assigned to Batch #14 at our Refshaleøen workshop. Soren will review your build sheet and reach out within one business day to schedule your fit consultation.
                    </p>
                    <button class="btn btn-primary" onclick="document.getElementById('commission-modal').classList.remove('active')">Return to Workshop</button>
                `;
            });
        });
    </script>
</body>
</html>

Compare with

Gemini 4 Argon: other attempts