hypeorcode
Network offOpen alone (new tab)

Run details

Model
opencode/longcat-2.5-preview-free
Route
opencode CLI
Reasoning
provider default
Limits
60 min · 131,072 output tokens
Date
2 Oct 2026
Time
4 min 50 s
Size
43 kB
Tokens
32,344 in, 17,253 out
Paid
Not billed per run (CLI plan)

Raw files: output · meta.json

Exact prompt

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

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

Source

43 kB 1,057 lines Raw

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lumen Cycles — Custom Cargo Bikes, Built in Copenhagen</title>
<meta name="description" content="Lumen Cycles is a Copenhagen workshop building custom cargo bikes to order. Hand-welded frames, Danish design, built for your life. From €4,000.">
<style>
  :root {
    --bg: #F6F3EC;
    --bg-soft: #EFEAE0;
    --ink: #1C2B24;
    --ink-soft: #4A5A51;
    --line: #D8D2C4;
    --accent: #B4552D;
    --accent-deep: #8F3F1F;
    --green: #1E3A2F;
    --brass: #C99A4B;
    --white: #FDFCF9;
    --frame-color: #1E3A2F;
    --radius: 14px;
    --font-body: "Avenir Next", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    --font-display: Georgia, "Times New Roman", "Iowan Old Style", serif;
  }

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

  html { scroll-behavior: smooth; }

  body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--ink);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  ::selection { background: var(--accent); color: var(--white); }

  h1, h2, h3 { font-family: var(--font-display); font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; }

  a { color: inherit; }

  .wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; }

  /* ---------- Header ---------- */
  header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    transition: background 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
    border-bottom: 1px solid transparent;
  }
  header.scrolled {
    background: rgba(246, 243, 236, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom-color: var(--line);
    box-shadow: 0 4px 24px rgba(28, 43, 36, 0.06);
  }
  .nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
  }
  .brand {
    display: flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
    font-family: var(--font-display);
    font-size: 1.25rem;
    letter-spacing: 0.02em;
  }
  .brand svg { display: block; }
  .nav-links { display: flex; align-items: center; gap: 34px; }
  .nav-links a {
    text-decoration: none;
    font-size: 0.86rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-soft);
    transition: color 0.25s;
  }
  .nav-links a:hover { color: var(--ink); }
  .nav-cta {
    background: var(--ink) !important;
    color: var(--white) !important;
    padding: 10px 22px;
    border-radius: 100px;
    transition: background 0.25s, transform 0.25s !important;
  }
  .nav-cta:hover { background: var(--accent) !important; transform: translateY(-1px); }
  .menu-btn {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
  }
  .menu-btn span {
    display: block;
    width: 24px; height: 2px;
    background: var(--ink);
    margin: 5px 0;
    transition: 0.3s;
  }

  /* ---------- Hero ---------- */
  .hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 140px 0 80px;
    position: relative;
    overflow: hidden;
  }
  .hero::before {
    content: "";
    position: absolute;
    top: -200px; right: -200px;
    width: 700px; height: 700px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(201, 154, 75, 0.14) 0%, transparent 65%);
    pointer-events: none;
  }
  .hero::after {
    content: "";
    position: absolute;
    bottom: -260px; left: -220px;
    width: 640px; height: 640px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(30, 58, 47, 0.10) 0%, transparent 65%);
    pointer-events: none;
  }
  .hero-grid {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 1;
  }
  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 26px;
  }
  .eyebrow::before {
    content: "";
    width: 34px; height: 1.5px;
    background: var(--accent);
  }
  .hero h1 {
    font-size: clamp(2.6rem, 5.2vw, 4.3rem);
    margin-bottom: 26px;
  }
  .hero h1 em {
    font-style: italic;
    color: var(--green);
  }
  .hero p.lede {
    font-size: 1.13rem;
    color: var(--ink-soft);
    max-width: 480px;
    margin-bottom: 38px;
  }
  .hero-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    border-radius: 100px;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: transform 0.25s, box-shadow 0.25s, background 0.25s;
  }
  .btn-primary {
    background: var(--accent);
    color: var(--white);
    box-shadow: 0 10px 30px rgba(180, 85, 45, 0.32);
  }
  .btn-primary:hover { background: var(--accent-deep); transform: translateY(-2px); box-shadow: 0 14px 36px rgba(180, 85, 45, 0.4); }
  .btn-ghost {
    background: transparent;
    color: var(--ink);
    border: 1.5px solid var(--line);
  }
  .btn-ghost:hover { border-color: var(--ink); transform: translateY(-2px); }
  .hero-note {
    margin-top: 34px;
    font-size: 0.85rem;
    color: var(--ink-soft);
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .hero-note svg { flex-shrink: 0; }

  .hero-visual { position: relative; }
  .bike-stage {
    background: var(--white);
    border-radius: 24px;
    border: 1px solid var(--line);
    padding: 34px 30px 22px;
    box-shadow: 0 30px 80px rgba(28, 43, 36, 0.10);
    position: relative;
  }
  .bike-stage svg { width: 100%; height: auto; display: block; }
  .stage-tag {
    position: absolute;
    top: 18px; left: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-soft);
    background: var(--bg-soft);
    border: 1px solid var(--line);
    padding: 6px 12px;
    border-radius: 100px;
  }
  .swatches {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 20px;
  }
  .swatches-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-right: 4px;
  }
  .swatch {
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 3px solid var(--white);
    box-shadow: 0 0 0 1.5px var(--line);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    padding: 0;
  }
  .swatch:hover { transform: scale(1.12); }
  .swatch.active { box-shadow: 0 0 0 2.5px var(--ink); transform: scale(1.12); }

  /* ---------- Stats bar ---------- */
  .stats {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--bg-soft);
  }
  .stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }
  .stat {
    padding: 40px 24px;
    text-align: center;
  }
  .stat + .stat { border-left: 1px solid var(--line); }
  .stat-num {
    font-family: var(--font-display);
    font-size: 2.4rem;
    color: var(--green);
    line-height: 1.1;
  }
  .stat-label {
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-top: 8px;
  }

  /* ---------- Sections ---------- */
  section { padding: 110px 0; }
  .section-head { max-width: 640px; margin-bottom: 64px; }
  .section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
  .section-head .eyebrow { margin-bottom: 18px; }
  .section-head h2 { font-size: clamp(2rem, 3.6vw, 2.9rem); margin-bottom: 18px; }
  .section-head p { color: var(--ink-soft); font-size: 1.06rem; }

  .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
  .reveal.visible { opacity: 1; transform: translateY(0); }
  .reveal.d1 { transition-delay: 0.1s; }
  .reveal.d2 { transition-delay: 0.2s; }
  .reveal.d3 { transition-delay: 0.3s; }

  /* ---------- Craft / features ---------- */
  .craft { background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
  }
  .feature {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 36px 30px;
    transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
  }
  .feature:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(28, 43, 36, 0.10);
    border-color: var(--brass);
  }
  .feature-icon {
    width: 52px; height: 52px;
    border-radius: 14px;
    background: var(--green);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
  }
  .feature h3 { font-size: 1.3rem; margin-bottom: 12px; }
  .feature p { color: var(--ink-soft); font-size: 0.96rem; }

  /* ---------- Process ---------- */
  .process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 26px;
    counter-reset: step;
  }
  .step {
    position: relative;
    padding: 34px 26px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--bg);
    transition: transform 0.3s, box-shadow 0.3s;
  }
  .step:hover { transform: translateY(-5px); box-shadow: 0 18px 44px rgba(28, 43, 36, 0.09); }
  .step-num {
    font-family: var(--font-display);
    font-size: 2.6rem;
    color: var(--brass);
    line-height: 1;
    margin-bottom: 18px;
  }
  .step h3 { font-size: 1.18rem; margin-bottom: 10px; }
  .step p { color: var(--ink-soft); font-size: 0.92rem; }
  .step-time {
    display: inline-block;
    margin-top: 16px;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    background: rgba(180, 85, 45, 0.09);
    padding: 5px 12px;
    border-radius: 100px;
  }

  /* ---------- Specs ---------- */
  .specs { background: var(--green); color: #E8E4D8; }
  .specs .section-head h2 { color: var(--white); }
  .specs .section-head p { color: #A8B5AC; }
  .specs .eyebrow { color: var(--brass); }
  .specs .eyebrow::before { background: var(--brass); }
  .spec-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
  }
  .spec-list { list-style: none; }
  .spec-list li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 20px;
    padding: 17px 0;
    border-bottom: 1px solid rgba(232, 228, 216, 0.16);
    font-size: 0.98rem;
  }
  .spec-list li span:first-child { color: #A8B5AC; }
  .spec-list li span:last-child { font-weight: 600; color: var(--white); text-align: right; }
  .spec-panel {
    background: rgba(253, 252, 249, 0.05);
    border: 1px solid rgba(232, 228, 216, 0.16);
    border-radius: var(--radius);
    padding: 36px 32px;
  }
  .spec-panel h3 { color: var(--white); font-size: 1.35rem; margin-bottom: 14px; }
  .spec-panel p { color: #A8B5AC; font-size: 0.95rem; margin-bottom: 22px; }
  .spec-panel .price {
    font-family: var(--font-display);
    font-size: 2.6rem;
    color: var(--white);
    line-height: 1.1;
  }
  .spec-panel .price small {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: #A8B5AC;
    font-weight: 400;
    display: block;
    margin-top: 6px;
  }
  .spec-panel .btn { margin-top: 26px; width: 100%; justify-content: center; }

  /* ---------- Testimonials ---------- */
  .testimonials { background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .quotes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
  }
  .quote {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 36px 30px;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s, box-shadow 0.3s;
  }
  .quote:hover { transform: translateY(-5px); box-shadow: 0 18px 44px rgba(28, 43, 36, 0.09); }
  .quote-stars { display: flex; gap: 3px; margin-bottom: 20px; }
  .quote p { font-family: var(--font-display); font-size: 1.08rem; font-style: italic; line-height: 1.55; margin-bottom: 26px; flex: 1; }
  .quote-who { display: flex; align-items: center; gap: 13px; }
  .quote-avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--white);
    flex-shrink: 0;
  }
  .quote-who strong { display: block; font-size: 0.92rem; }
  .quote-who small { color: var(--ink-soft); font-size: 0.8rem; }

  /* ---------- CTA ---------- */
  .cta {
    background: var(--accent);
    color: var(--white);
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  .cta::before {
    content: "";
    position: absolute;
    top: -180px; left: 50%;
    transform: translateX(-50%);
    width: 900px; height: 900px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(253, 252, 249, 0.12) 0%, transparent 60%);
    pointer-events: none;
  }
  .cta h2 { font-size: clamp(2.2rem, 4.4vw, 3.4rem); margin-bottom: 20px; position: relative; }
  .cta p {
    max-width: 520px;
    margin: 0 auto 40px;
    font-size: 1.08rem;
    color: rgba(253, 252, 249, 0.88);
    position: relative;
  }
  .cta .btn-primary {
    background: var(--white);
    color: var(--accent-deep);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.18);
    position: relative;
  }
  .cta .btn-primary:hover { background: var(--ink); color: var(--white); }
  .cta-note { margin-top: 26px; font-size: 0.85rem; color: rgba(253, 252, 249, 0.75); position: relative; }

  /* ---------- Footer ---------- */
  footer {
    background: var(--ink);
    color: #93A29A;
    padding: 70px 0 36px;
  }
  .footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 44px;
    margin-bottom: 54px;
  }
  .footer-brand .brand { color: var(--white); margin-bottom: 18px; }
  .footer-brand p { font-size: 0.92rem; max-width: 300px; }
  footer h4 {
    color: var(--white);
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 18px;
  }
  footer ul { list-style: none; }
  footer ul li { margin-bottom: 11px; }
  footer ul a {
    color: #93A29A;
    text-decoration: none;
    font-size: 0.92rem;
    transition: color 0.25s;
  }
  footer ul a:hover { color: var(--white); }
  .footer-bottom {
    border-top: 1px solid rgba(232, 228, 216, 0.12);
    padding-top: 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.82rem;
  }

  /* ---------- Responsive ---------- */
  @media (max-width: 960px) {
    .hero-grid { grid-template-columns: 1fr; gap: 50px; }
    .hero-visual { max-width: 560px; }
    .features, .quotes { grid-template-columns: 1fr 1fr; }
    .process-grid { grid-template-columns: 1fr 1fr; }
    .stats-grid { grid-template-columns: 1fr 1fr; }
    .stat:nth-child(3) { border-left: none; }
    .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
    .spec-cols { grid-template-columns: 1fr; gap: 40px; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 640px) {
    .nav-links {
      position: fixed;
      top: 72px; left: 0; right: 0;
      background: var(--bg);
      flex-direction: column;
      align-items: flex-start;
      gap: 0;
      padding: 10px 28px 24px;
      border-bottom: 1px solid var(--line);
      transform: translateY(-130%);
      transition: transform 0.35s ease;
      box-shadow: 0 20px 40px rgba(28, 43, 36, 0.1);
    }
    .nav-links.open { transform: translateY(0); }
    .nav-links a { padding: 13px 0; width: 100%; }
    .nav-cta { margin-top: 10px; }
    .menu-btn { display: block; }
    .features, .quotes, .process-grid, .stats-grid { grid-template-columns: 1fr; }
    .stat + .stat { border-left: none; border-top: 1px solid var(--line); }
    section { padding: 76px 0; }
    .footer-grid { grid-template-columns: 1fr; gap: 34px; }
    .footer-bottom { flex-direction: column; align-items: flex-start; }
  }
</style>
</head>
<body>

<header id="header">
  <div class="wrap">
    <nav class="nav">
      <a class="brand" href="#top" aria-label="Lumen Cycles home">
        <svg width="30" height="30" viewBox="0 0 30 30" fill="none" aria-hidden="true">
          <circle cx="8" cy="20" r="5.5" stroke="#1C2B24" stroke-width="2"/>
          <circle cx="23" cy="20" r="5.5" stroke="#1C2B24" stroke-width="2"/>
          <path d="M8 20 L14 9 H20 M14 9 L17.5 20 H23 M20 9 L23 20" stroke="#1C2B24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          <circle cx="14" cy="9" r="1.6" fill="#B4552D"/>
        </svg>
        Lumen Cycles
      </a>
      <button class="menu-btn" id="menuBtn" aria-label="Toggle menu" aria-expanded="false">
        <span></span><span></span><span></span>
      </button>
      <div class="nav-links" id="navLinks">
        <a href="#craft">Craft</a>
        <a href="#process">Process</a>
        <a href="#specs">Specs</a>
        <a href="#stories">Stories</a>
        <a href="#build" class="nav-cta">Start your build</a>
      </div>
    </nav>
  </div>
</header>

<main id="top">

  <!-- Hero -->
  <section class="hero">
    <div class="wrap">
      <div class="hero-grid">
        <div class="hero-copy">
          <span class="eyebrow">Copenhagen · Est. 2011</span>
          <h1>The cargo bike your family <em>deserves</em>.</h1>
          <p class="lede">Every Lumen is built to order in our Nørrebro workshop — hand-welded steel, fitted to your body, your streets, and your life. No warehouses. No compromises.</p>
          <div class="hero-actions">
            <a href="#build" class="btn btn-primary">
              Start your build
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M2 8h11M9 3.5 13.5 8 9 12.5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
            </a>
            <a href="#craft" class="btn btn-ghost">See the craft</a>
          </div>
          <div class="hero-note">
            <svg width="15" height="15" viewBox="0 0 15 15" fill="none" aria-hidden="true"><circle cx="7.5" cy="7.5" r="6.5" stroke="#4A5A51" stroke-width="1.4"/><path d="M7.5 4.5v3.2l2.2 1.4" stroke="#4A5A51" stroke-width="1.4" stroke-linecap="round"/></svg>
            Build slots for this season close November 15
          </div>
        </div>
        <div class="hero-visual reveal">
          <div class="bike-stage">
            <span class="stage-tag">Lumen Longjohn · 2026</span>
            <svg id="bikeSvg" viewBox="0 0 620 380" role="img" aria-label="Illustration of a Lumen longjohn cargo bike">
              <defs>
                <linearGradient id="boxGrad" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="0%" stop-color="#ffffff" stop-opacity="0.22"/>
                  <stop offset="100%" stop-color="#000000" stop-opacity="0.10"/>
                </linearGradient>
              </defs>

              <!-- ground shadow -->
              <ellipse cx="310" cy="332" rx="240" ry="12" fill="#1C2B24" opacity="0.08"/>

              <!-- rear wheel -->
              <g>
                <circle cx="150" cy="250" r="72" fill="none" stroke="#1C2B24" stroke-width="7"/>
                <circle cx="150" cy="250" r="62" fill="none" stroke="#8A938C" stroke-width="1.6"/>
                <g stroke="#8A938C" stroke-width="1.3">
                  <line x1="150" y1="188" x2="150" y2="312"/>
                  <line x1="88" y1="250" x2="212" y2="250"/>
                  <line x1="106" y1="206" x2="194" y2="294"/>
                  <line x1="194" y1="206" x2="106" y2="294"/>
                  <line x1="122" y1="194" x2="178" y2="306"/>
                  <line x1="178" y1="194" x2="122" y2="306"/>
                  <line x1="94" y1="222" x2="206" y2="278"/>
                  <line x1="206" y1="222" x2="94" y2="278"/>
                </g>
                <circle cx="150" cy="250" r="9" fill="#1C2B24"/>
              </g>

              <!-- front wheel -->
              <g>
                <circle cx="470" cy="250" r="72" fill="none" stroke="#1C2B24" stroke-width="7"/>
                <circle cx="470" cy="250" r="62" fill="none" stroke="#8A938C" stroke-width="1.6"/>
                <g stroke="#8A938C" stroke-width="1.3">
                  <line x1="470" y1="188" x2="470" y2="312"/>
                  <line x1="408" y1="250" x2="532" y2="250"/>
                  <line x1="426" y1="206" x2="514" y2="294"/>
                  <line x1="514" y1="206" x2="426" y2="294"/>
                  <line x1="442" y1="194" x2="498" y2="306"/>
                  <line x1="498" y1="194" x2="442" y2="306"/>
                  <line x1="414" y1="222" x2="526" y2="278"/>
                  <line x1="526" y1="222" x2="414" y2="278"/>
                </g>
                <circle cx="470" cy="250" r="9" fill="#1C2B24"/>
              </g>

              <!-- cargo box -->
              <g>
                <path d="M268 196 L428 196 L418 292 L278 292 Z" class="frame-fill" fill="#1E3A2F"/>
                <path d="M268 196 L428 196 L418 292 L278 292 Z" fill="url(#boxGrad)"/>
                <path d="M268 196 L428 196 L418 292 L278 292 Z" fill="none" stroke="#1C2B24" stroke-width="4" stroke-linejoin="round"/>
                <line x1="268" y1="196" x2="278" y2="292" stroke="#1C2B24" stroke-width="3"/>
                <line x1="428" y1="196" x2="418" y2="292" stroke="#1C2B24" stroke-width="3"/>
                <rect x="286" y="212" width="124" height="30" rx="6" fill="#F6F3EC" opacity="0.92"/>
                <text x="348" y="233" text-anchor="middle" font-family="Georgia, serif" font-size="17" letter-spacing="3" fill="#1E3A2F">LUMEN</text>
                <!-- box slats -->
                <line x1="273" y1="252" x2="423" y2="252" stroke="#1C2B24" stroke-width="2" opacity="0.35"/>
                <line x1="275" y1="272" x2="421" y2="272" stroke="#1C2B24" stroke-width="2" opacity="0.35"/>
              </g>

              <!-- frame -->
              <g stroke="#1C2B24" stroke-width="7" stroke-linecap="round" fill="none">
                <!-- seat tube & stays -->
                <line x1="150" y1="250" x2="196" y2="150"/>
                <line x1="150" y1="250" x2="238" y2="250"/>
                <!-- down tube to box -->
                <line x1="238" y1="250" x2="300" y2="250"/>
                <!-- head tube -->
                <line x1="428" y1="196" x2="452" y2="132"/>
                <!-- fork -->
                <line x1="452" y1="132" x2="470" y2="250"/>
                <!-- top line box to head -->
                <line x1="428" y1="196" x2="446" y2="150"/>
              </g>

              <!-- frame accent: colored down tube -->
              <line x1="238" y1="250" x2="300" y2="250" stroke="#B4552D" stroke-width="7" stroke-linecap="round"/>

              <!-- seat -->
              <path d="M172 148 Q196 138 222 146 Q224 152 216 154 L180 156 Q170 154 172 148 Z" fill="#1C2B24"/>
              <line x1="196" y1="150" x2="196" y2="158" stroke="#1C2B24" stroke-width="5" stroke-linecap="round"/>

              <!-- handlebar -->
              <path d="M452 132 L446 108" stroke="#1C2B24" stroke-width="6" stroke-linecap="round"/>
              <path d="M424 106 Q446 96 468 106" stroke="#1C2B24" stroke-width="6" stroke-linecap="round" fill="none"/>
              <circle cx="424" cy="106" r="5" fill="#B4552D"/>
              <circle cx="468" cy="106" r="5" fill="#B4552D"/>

              <!-- lamp -->
              <circle cx="452" cy="122" r="8" fill="#C99A4B" stroke="#1C2B24" stroke-width="3"/>
              <path d="M458 118 L486 108 L486 132 Z" fill="#C99A4B" opacity="0.28"/>

              <!-- chain & crank -->
              <circle cx="238" cy="250" r="14" fill="none" stroke="#1C2B24" stroke-width="4"/>
              <line x1="150" y1="250" x2="238" y2="250" stroke="#8A938C" stroke-width="2.5"/>
              <line x1="150" y1="262" x2="238" y2="238" stroke="#8A938C" stroke-width="2.5"/>
              <line x1="238" y1="250" x2="258" y2="226" stroke="#1C2B24" stroke-width="5" stroke-linecap="round"/>
              <line x1="258" y1="226" x2="272" y2="226" stroke="#1C2B24" stroke-width="5" stroke-linecap="round"/>

              <!-- fenders -->
              <path d="M84 236 A72 72 0 0 1 216 236" fill="none" stroke="#1C2B24" stroke-width="5" stroke-linecap="round"/>
              <path d="M404 236 A72 72 0 0 1 536 236" fill="none" stroke="#1C2B24" stroke-width="5" stroke-linecap="round"/>

              <!-- rear rack -->
              <line x1="120" y1="196" x2="186" y2="196" stroke="#1C2B24" stroke-width="5" stroke-linecap="round"/>
              <line x1="128" y1="196" x2="140" y2="244" stroke="#1C2B24" stroke-width="4" stroke-linecap="round"/>
            </svg>
          </div>
          <div class="swatches" role="group" aria-label="Frame colour">
            <span class="swatches-label">Frame</span>
            <button class="swatch active" data-color="#1E3A2F" data-name="Forest" style="background:#1E3A2F" aria-label="Forest green"></button>
            <button class="swatch" data-color="#22304A" data-name="Midnight" style="background:#22304A" aria-label="Midnight blue"></button>
            <button class="swatch" data-color="#B4552D" data-name="Rust" style="background:#B4552D" aria-label="Rust"></button>
            <button class="swatch" data-color="#C99A4B" data-name="Brass" style="background:#C99A4B" aria-label="Brass"></button>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Stats -->
  <div class="stats">
    <div class="wrap">
      <div class="stats-grid">
        <div class="stat reveal"><div class="stat-num">1,240+</div><div class="stat-label">Bikes delivered</div></div>
        <div class="stat reveal d1"><div class="stat-num">14</div><div class="stat-label">Years of welding</div></div>
        <div class="stat reveal d2"><div class="stat-num">10 yr</div><div class="stat-label">Frame warranty</div></div>
        <div class="stat reveal d3"><div class="stat-num">4.9<span style="font-size:1.3rem">/5</span></div><div class="stat-label">Owner rating</div></div>
      </div>
    </div>
  </div>

  <!-- Craft -->
  <section class="craft" id="craft">
    <div class="wrap">
      <div class="section-head reveal">
        <span class="eyebrow">The craft</span>
        <h2>Built like it's the only one. Because it is.</h2>
        <p>One builder. One bike. From raw steel tube to your doorstep, your Lumen passes through a single pair of hands — yours truly, welded and finished by the person who answers your emails.</p>
      </div>
      <div class="features">
        <div class="feature reveal">
          <div class="feature-icon">
            <svg width="26" height="26" viewBox="0 0 26 26" fill="none" aria-hidden="true"><path d="M13 2 4 7v12l9 5 9-5V7l-9-5Z" stroke="#F6F3EC" stroke-width="1.8" stroke-linejoin="round"/><path d="M13 8v10M8 10.5v5M18 10.5v5" stroke="#F6F3EC" stroke-width="1.8" stroke-linecap="round"/></svg>
          </div>
          <h3>Hand-welded chromoly</h3>
          <p>Every frame is TIG-welded from double-butted chromoly steel. Lighter than it looks, stronger than it needs to be, and repairable forever.</p>
        </div>
        <div class="feature reveal d1">
          <div class="feature-icon">
            <svg width="26" height="26" viewBox="0 0 26 26" fill="none" aria-hidden="true"><circle cx="13" cy="13" r="9" stroke="#F6F3EC" stroke-width="1.8"/><path d="M13 7.5v5.5l3.8 2.4" stroke="#F6F3EC" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
          </div>
          <h3>Fitted to your body</h3>
          <p>You visit the workshop for a full fitting — inseam, reach, riding style. Frame geometry is adjusted to you, not the other way around.</p>
        </div>
        <div class="feature reveal d2">
          <div class="feature-icon">
            <svg width="26" height="26" viewBox="0 0 26 26" fill="none" aria-hidden="true"><path d="M5 21V9a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12" stroke="#F6F3EC" stroke-width="1.8" stroke-linecap="round"/><path d="M3 21h20" stroke="#F6F3EC" stroke-width="1.8" stroke-linecap="round"/><path d="M9 13h3M14 13h3M9 16.5h3M14 16.5h3" stroke="#F6F3EC" stroke-width="1.6" stroke-linecap="round"/></svg>
          </div>
          <h3>Carries 180 kg</h3>
          <p>Two kids, a week of groceries, or both. The reinforced longjohn box and tri-rated frame handle Copenhagen's daily haul without breaking a sweat.</p>
        </div>
        <div class="feature reveal">
          <div class="feature-icon">
            <svg width="26" height="26" viewBox="0 0 26 26" fill="none" aria-hidden="true"><path d="M13 3v3M13 20v3M3 13h3M20 13h3M6 6l2 2M18 18l2 2M20 6l-2 2M8 18l-2 2" stroke="#F6F3EC" stroke-width="1.8" stroke-linecap="round"/><circle cx="13" cy="13" r="4.5" stroke="#F6F3EC" stroke-width="1.8"/></svg>
          </div>
          <h3>All-weather ready</h3>
          <p>Powder-coated beneath the paint, stainless hardware throughout, and full fenders fitted as standard. Danish rain is not an occasion — it's a Tuesday.</p>
        </div>
        <div class="feature reveal d1">
          <div class="feature-icon">
            <svg width="26" height="26" viewBox="0 0 26 26" fill="none" aria-hidden="true"><path d="M13 21s-7.5-4.6-9.3-9.2C2.4 8.4 4.6 5 8 5c2 0 3.4 1.1 5 3 1.6-1.9 3-3 5-3 3.4 0 5.6 3.4 4.3 6.8C20.5 16.4 13 21 13 21Z" stroke="#F6F3EC" stroke-width="1.8" stroke-linejoin="round"/></svg>
          </div>
          <h3>Lifetime service plan</h3>
          <p>First five services are on us, forever discounted after. We keep a file on your bike — every bolt, every adjustment — for as long as you ride it.</p>
        </div>
        <div class="feature reveal d2">
          <div class="feature-icon">
            <svg width="26" height="26" viewBox="0 0 26 26" fill="none" aria-hidden="true"><path d="M4 18c2-1 4-1 6 0s4 1 6 0 4-1 6 0" stroke="#F6F3EC" stroke-width="1.8" stroke-linecap="round"/><path d="M4 13c2-1 4-1 6 0s4 1 6 0 4-1 6 0" stroke="#F6F3EC" stroke-width="1.8" stroke-linecap="round"/><path d="M13 3v4M10.5 5.5 13 3l2.5 2.5" stroke="#F6F3EC" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
          </div>
          <h3>Designed for cities</h3>
          <p>Narrow enough for bike lanes, stable enough for cobblestones. Your Lumen is engineered around the streets of Copenhagen — and yours.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Process -->
  <section id="process">
    <div class="wrap">
      <div class="section-head reveal">
        <span class="eyebrow">The process</span>
        <h2>From conversation to cobblestones in eight weeks.</h2>
        <p>No production line, no waiting list lottery. Just a clear, honest path from your first email to the bike you'll keep for decades.</p>
      </div>
      <div class="process-grid">
        <div class="step reveal">
          <div class="step-num">01</div>
          <h3>Talk</h3>
          <p>A 30-minute call or coffee at the workshop. Tell us what you carry, where you ride, and how the bike should feel.</p>
          <span class="step-time">Week 1</span>
        </div>
        <div class="step reveal d1">
          <div class="step-num">02</div>
          <h3>Fit</h3>
          <p>You visit Nørrebro for a full fitting. We measure, adjust the geometry, and lock your spec — frame, box, gears, colours.</p>
          <span class="step-time">Week 2</span>
        </div>
        <div class="step reveal d2">
          <div class="step-num">03</div>
          <h3>Build</h3>
          <p>Your frame is welded, painted, and assembled by one builder. You receive photo updates at every milestone.</p>
          <span class="step-time">Weeks 3–7</span>
        </div>
        <div class="step reveal d3">
          <div class="step-num">04</div>
          <h3>Ride</h3>
          <p>Final setup, a test ride together, and handover. Then a lifetime of service — and the first five check-ups are free.</p>
          <span class="step-time">Week 8</span>
        </div>
      </div>
    </div>
  </section>

  <!-- Specs -->
  <section class="specs" id="specs">
    <div class="wrap">
      <div class="section-head reveal">
        <span class="eyebrow">The spec</span>
        <h2>Serious hardware, honestly priced.</h2>
        <p>We buy the same components as the big factories — we just don't mark them up to pay for showrooms in every postcode.</p>
      </div>
      <div class="spec-cols">
        <ul class="spec-list reveal">
          <li><span>Frame</span><span>Double-butted chromoly, TIG-welded</span></li>
          <li><span>Cargo box</span><span>Birch ply, 90 L, child-seat ready</span></li>
          <li><span>Drivetrain</span><span>Shimano Alfine 8-speed hub</span></li>
          <li><span>Brakes</span><span>Hydraulic disc, front &amp; rear</span></li>
          <li><span>Range (e-assist)</span><span>Up to 100 km per charge</span></li>
          <li><span>Payload</span><span>180 kg total</span></li>
          <li><span>Weight</span><span>From 28 kg</span></li>
          <li><span>Warranty</span><span>10 years on frame &amp; fork</span></li>
        </ul>
        <div class="spec-panel reveal d1">
          <h3>Lumen Longjohn — from €4,000</h3>
          <p>That's the complete bike: your fitting, your colours, e-assist if you want it, delivery within Denmark, and the lifetime service plan. The price we quote is the price you pay.</p>
          <div class="price">€4,000<small>Fully built · ready to ride · yours</small></div>
          <a href="#build" class="btn btn-primary">Reserve a build slot</a>
        </div>
      </div>
    </div>
  </section>

  <!-- Testimonials -->
  <section class="testimonials" id="stories">
    <div class="wrap">
      <div class="section-head center reveal">
        <span class="eyebrow">Owner stories</span>
        <h2>4,000 euros, spent well.</h2>
        <p>We don't advertise. Most Lumen owners arrive because a friend wouldn't stop talking about theirs.</p>
      </div>
      <div class="quotes">
        <div class="quote reveal">
          <div class="quote-stars" aria-label="5 out of 5 stars">
            <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 1.5 10 5.6l4.5.7-3.2 3.1.8 4.5L8 11.7l-4.1 2.2.8-4.5L1.5 6.3 6 5.6 8 1.5Z" fill="#C99A4B"/></svg>
            <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 1.5 10 5.6l4.5.7-3.2 3.1.8 4.5L8 11.7l-4.1 2.2.8-4.5L1.5 6.3 6 5.6 8 1.5Z" fill="#C99A4B"/></svg>
            <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 1.5 10 5.6l4.5.7-3.2 3.1.8 4.5L8 11.7l-4.1 2.2.8-4.5L1.5 6.3 6 5.6 8 1.5Z" fill="#C99A4B"/></svg>
            <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 1.5 10 5.6l4.5.7-3.2 3.1.8 4.5L8 11.7l-4.1 2.2.8-4.5L1.5 6.3 6 5.6 8 1.5Z" fill="#C99A4B"/></svg>
            <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 1.5 10 5.6l4.5.7-3.2 3.1.8 4.5L8 11.7l-4.1 2.2.8-4.5L1.5 6.3 6 5.6 8 1.5Z" fill="#C99A4B"/></svg>
          </div>
          <p>"We sold our car eighteen months ago. Two kids, a dog, and a weekly shop — the Lumen handles all of it. People stop me to ask about it constantly."</p>
          <div class="quote-who">
            <div class="quote-avatar" style="background:#1E3A2F">MK</div>
            <div><strong>Mette K.</strong><small>Frederiksberg · Longjohn since 2022</small></div>
          </div>
        </div>
        <div class="quote reveal d1">
          <div class="quote-stars" aria-label="5 out of 5 stars">
            <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 1.5 10 5.6l4.5.7-3.2 3.1.8 4.5L8 11.7l-4.1 2.2.8-4.5L1.5 6.3 6 5.6 8 1.5Z" fill="#C99A4B"/></svg>
            <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 1.5 10 5.6l4.5.7-3.2 3.1.8 4.5L8 11.7l-4.1 2.2.8-4.5L1.5 6.3 6 5.6 8 1.5Z" fill="#C99A4B"/></svg>
            <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 1.5 10 5.6l4.5.7-3.2 3.1.8 4.5L8 11.7l-4.1 2.2.8-4.5L1.5 6.3 6 5.6 8 1.5Z" fill="#C99A4B"/></svg>
            <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 1.5 10 5.6l4.5.7-3.2 3.1.8 4.5L8 11.7l-4.1 2.2.8-4.5L1.5 6.3 6 5.6 8 1.5Z" fill="#C99A4B"/></svg>
            <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 1.5 10 5.6l4.5.7-3.2 3.1.8 4.5L8 11.7l-4.1 2.2.8-4.5L1.5 6.3 6 5.6 8 1.5Z" fill="#C99A4B"/></svg>
          </div>
          <p>"As a bike mechanic myself, I'm hard to impress. The welds, the cable routing, the finish — it's workshop-quality work at a fair price. No regrets."</p>
          <div class="quote-who">
            <div class="quote-avatar" style="background:#B4552D">JT</div>
            <div><strong>Jonas T.</strong><small>Nørrebro · Longjohn since 2024</small></div>
          </div>
        </div>
        <div class="quote reveal d2">
          <div class="quote-stars" aria-label="5 out of 5 stars">
            <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 1.5 10 5.6l4.5.7-3.2 3.1.8 4.5L8 11.7l-4.1 2.2.8-4.5L1.5 6.3 6 5.6 8 1.5Z" fill="#C99A4B"/></svg>
            <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 1.5 10 5.6l4.5.7-3.2 3.1.8 4.5L8 11.7l-4.1 2.2.8-4.5L1.5 6.3 6 5.6 8 1.5Z" fill="#C99A4B"/></svg>
            <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 1.5 10 5.6l4.5.7-3.2 3.1.8 4.5L8 11.7l-4.1 2.2.8-4.5L1.5 6.3 6 5.6 8 1.5Z" fill="#C99A4B"/></svg>
            <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 1.5 10 5.6l4.5.7-3.2 3.1.8 4.5L8 11.7l-4.1 2.2.8-4.5L1.5 6.3 6 5.6 8 1.5Z" fill="#C99A4B"/></svg>
            <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 1.5 10 5.6l4.5.7-3.2 3.1.8 4.5L8 11.7l-4.1 2.2.8-4.5L1.5 6.3 6 5.6 8 1.5Z" fill="#C99A4B"/></svg>
          </div>
          <p>"The fitting session alone was worth it. They adjusted everything to my back, and six months in it still feels like it was made for me — because it was."</p>
          <div class="quote-who">
            <div class="quote-avatar" style="background:#22304A">AL</div>
            <div><strong>Anna L.</strong><small>Østerbro · Longjohn since 2023</small></div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- CTA -->
  <section class="cta" id="build">
    <div class="wrap">
      <h2 class="reveal">Your build slot is waiting.</h2>
      <p class="reveal d1">We take on twelve builds per season so every bike gets the attention it deserves. Reserve yours with a €200 deposit — fully refundable after your first conversation.</p>
      <a href="mailto:build@lumencycles.dk?subject=Build%20slot%20enquiry" class="btn btn-primary reveal d2">Book a fitting — build@lumencycles.dk</a>
      <div class="cta-note reveal d3">Or call +45 33 12 40 80 · Tue–Sat, 9:00–17:00 · Nørrebro, Copenhagen</div>
    </div>
  </section>

</main>

<footer>
  <div class="wrap">
    <div class="footer-grid">
      <div class="footer-brand">
        <a class="brand" href="#top" aria-label="Lumen Cycles home">
          <svg width="30" height="30" viewBox="0 0 30 30" fill="none" aria-hidden="true">
            <circle cx="8" cy="20" r="5.5" stroke="#F6F3EC" stroke-width="2"/>
            <circle cx="23" cy="20" r="5.5" stroke="#F6F3EC" stroke-width="2"/>
            <path d="M8 20 L14 9 H20 M14 9 L17.5 20 H23 M20 9 L23 20" stroke="#F6F3EC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            <circle cx="14" cy="9" r="1.6" fill="#C99A4B"/>
          </svg>
          Lumen Cycles
        </a>
        <p>Custom cargo bikes, hand-built to order in Nørrebro, Copenhagen. One builder, one bike, no shortcuts.</p>
      </div>
      <div>
        <h4>Workshop</h4>
        <ul>
          <li><a href="#craft">The craft</a></li>
          <li><a href="#process">The process</a></li>
          <li><a href="#specs">Specifications</a></li>
          <li><a href="#build">Build slots</a></li>
        </ul>
      </div>
      <div>
        <h4>Owners</h4>
        <ul>
          <li><a href="#stories">Owner stories</a></li>
          <li><a href="#">Service plan</a></li>
          <li><a href="#">Spare parts</a></li>
          <li><a href="#">Warranty</a></li>
        </ul>
      </div>
      <div>
        <h4>Visit</h4>
        <ul>
          <li><a href="#">Guldbergsgade 42</a></li>
          <li><a href="#">2200 Copenhagen N</a></li>
          <li><a href="mailto:hello@lumencycles.dk">hello@lumencycles.dk</a></li>
          <li><a href="tel:+4533124080">+45 33 12 40 80</a></li>
        </ul>
      </div>
    </div>
    <div class="footer-bottom">
      <span>© 2026 Lumen Cycles ApS · CVR 32910477</span>
      <span>Built slowly, in Copenhagen.</span>
    </div>
  </div>
</footer>

<script>
(function () {
  var header = document.getElementById('header');
  var menuBtn = document.getElementById('menuBtn');
  var navLinks = document.getElementById('navLinks');

  function onScroll() {
    if (window.scrollY > 24) {
      header.classList.add('scrolled');
    } else {
      header.classList.remove('scrolled');
    }
  }
  window.addEventListener('scroll', onScroll, { passive: true });
  onScroll();

  menuBtn.addEventListener('click', function () {
    var open = navLinks.classList.toggle('open');
    menuBtn.setAttribute('aria-expanded', open ? 'true' : 'false');
  });

  navLinks.addEventListener('click', function (e) {
    if (e.target.tagName === 'A') {
      navLinks.classList.remove('open');
      menuBtn.setAttribute('aria-expanded', 'false');
    }
  });

  var reveals = document.querySelectorAll('.reveal');
  if ('IntersectionObserver' in window) {
    var io = new IntersectionObserver(function (entries) {
      entries.forEach(function (entry) {
        if (entry.isIntersecting) {
          entry.target.classList.add('visible');
          io.unobserve(entry.target);
        }
      });
    }, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });
    reveals.forEach(function (el) { io.observe(el); });
  } else {
    reveals.forEach(function (el) { el.classList.add('visible'); });
  }

  var swatches = document.querySelectorAll('.swatch');
  var frameFills = document.querySelectorAll('#bikeSvg .frame-fill');
  var stageTag = document.querySelector('.stage-tag');
  swatches.forEach(function (swatch) {
    swatch.addEventListener('click', function () {
      swatches.forEach(function (s) { s.classList.remove('active'); });
      swatch.classList.add('active');
      var color = swatch.getAttribute('data-color');
      var name = swatch.getAttribute('data-name');
      frameFills.forEach(function (el) { el.setAttribute('fill', color); });
      if (stageTag) {
        stageTag.textContent = 'Lumen Longjohn · ' + name;
      }
    });
  });
})();
</script>

</body>
</html>

LongCat 2.5 Preview: other attempts

  • LongCat 2.5 Preview, Pelican: Not run: no OpenRouter route
  • About · 144 words