hypeorcode
Network offOpen alone (new tab)

Run details

Model
xingchen-agi/xing4.0-29b-a4b:free
Route
OpenRouter API, one user message
Reasoning
provider default, 426 reasoning tokens
Limits
60 min · 235,929 output tokens
Date
21 Oct 2026
Time
4 min 2 s
Size
51 kB
Tokens
97 in, 19,304 out
List price
free (list price $0)
Paid
$0 (free route)
Blocked requests
fonts.googleapis.com

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

51 kB 1,247 lines Raw

<!DOCTYPE html>
<html lang="en">
<head>
<meta>
<meta charset="UTF--8">
<meta name="viewport" contentcontent="width=device-width, initial-scale=device-width">
<title>Lumen Cycles — Bespoke Cargo Bikes from Copenhagen</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap">
<style>
/* ===== RESET & BASE ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-edge; }
html { scroll-behavior: smooth; font-size: 16px; -webkit-font-smoothing: antirange; -moz-osd smoothing: antichanges; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemSystemSystemSystemSystemSystemSystemSystemSystemSystemSystemSystemSystemSystemSystemSystemSystemSystemSystemSystemSystemSystemSystemSystemSystem, sans-serif;
  color: #0a0a0a;
  background: #fafafa;
  line-height: 1.6;
  overflow-x: hidden;
}
h1, h2, h3, h4 { font-weight: 700; line-height: 1.2; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input { font-family: inherit; }

/* ===== UTILITIES ===== */
.container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.fade-down { opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease, transform 0.7s ease; }
.fade-down.visible { opacity: 1; transform: translateY(0); }
.slide-up { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; }
.slide-up.visible { opacity: 1; transform: translateY(0); }
.fade-in { opacity: 0; transition: opacity 0.6s ease; }
.fade-in.visible { opacity: 1; }
.scale-in { opacity: 0; transform: scale(0.92); transition: opacity 0.7s ease, transform 0.7s ease; }
.scale-in.visible { opacity: 1; transform: scale(1); }
.text-gradient { background: linear-gradient(135deg, #ffffff 0%, #d4d4d4 100%); -webkit-background-clip: text; -webkit-textclip-path: clip(); background-clip: text; color: transparent; }
.section-padding { padding: 9rem 0; }
.text-center { text-align: center; }

/* ===== NAVIGATION ===== */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px;
  transition: padding 0.3s ease;
}
.nav.scrolled { padding: 12px 24px; }
.nav .logo {
  font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em;
  display: flex; align-items: center; gap: 10px;
}
.logo-dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: #ffffff;
  animation: logoPulse 2.5s ease-in-out infinite;
}
@keyframes logoPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.7; }
}
.nav .nav-links { display: flex; gap: 36px; align-items: center; }
.nav .nav-links a {
  font-size: 0.875rem; font-weight: 500; color: #737373;
  text-decoration: none; letter-spacing: 0.02em;
  position: relative; transition: color 0.3s ease;
}
.nav .nav-links a::after {
  content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px;
  background: #818cf8; transition: width 0.3s ease;
}
.nav .nav-links a:hover { color: #0a0a0a; }
.nav .nav-links a:hover::after { width: 100%; }
.nav .cta-btn {
  background: #0a0a0a; color: #ffffff !important;
  padding: 12px 28px; border-radius: 999px; font-size: 0.875rem; font-weight: 600;
  transition: background 0.3s ease, transform 0.3s ease;
}
.nav .cta-btn:hover { background: #d4d4d4; transform: scale(1.05); }

/* ===== HERO ===== */
.hero {
  min-height: 100vh; display: flex; align-items: center;
  padding-top: 80px; position: relative; overflow: hidden;
}
.hero::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(ellipse at 70% 50%, rgba(129, 140, 248, 0.08) 0%, transparent 60%);
  pointer-events: none;
}
.hero-content { position: relative; z-index: 2; max-width: 1280px; margin: 0 auto; padding: 0 24px; width: 100%; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.8); backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.5);
  padding: 8px 16px; border-radius: 999px;
  font-size: 0.75rem; font-weight: 600; color: #0a0a0a;
  margin-bottom: 24px; animation: fadeInDown 0.7s ease forwards;
}
.hero-badge .dot {
  width: 6px; height: 6px; border-radius: 50%; background: #fbbf24;
  animation: blink 1.5s ease infinite;
}
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }

.hero h1 {
  font-size: clamp(2.75rem, 6vw, 5rem);
  font-weight: 800; letter-spacing: -0.04em;
  color: #ffffff; line-height: 1.05;
  margin-bottom: 24px; max-width: 1400px;
}
.hero h1 .highlight {
  background: linear-gradient(135deg, #818cf8 0%, #fbbf24 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-textclip-path: clip();
  color: transparent;
}
.hero p {
  font-size: 1.125rem; font-weight: 300; color: #d4d4d4;
  max-width: 640px; line-height: 1.7; margin-bottom: 40px;
}
.hero-btns { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 64px; }

/* Buttons */
.btn-primary {
  background: #ffffff; color: #0a0a0a;
  padding: 16px 32px; border-radius: 999px;
  font-size: 0.875rem; font-weight: 600;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 24px rgba(0,0,0,0.12);
}
.btn-primary:hover { transform: translateY(-2px); boxshadow: 0 8px 32px rgba(0,0,0,0.2); }
.btn-ghost {
  background: transparent; color: #ffffff;
  padding: 16px 32px; border-radius: 999px;
  font-size: 0.875rem; font-weight: 600;
  border: 1px solid rgba(255,255,255,0.4);
  transition: border-color 0.3s ease, background 0.3s ease;
}
.btn-ghost:hover { border-color: #ffffff; background: rgba(255,255,255,0.05); }

/* Hero image placeholder */
.hero-visual {
  position: absolute; right: -40px; top: 50%;
  transform: translateY(-50%);
  max-width: 50%; width: 100%; height: auto; z-index: 1;
  opacity: 0.15; pointer-events: none;
}
.hero-visual .bike-silhouette {
  width: 100%; height: auto; filter: grayscale(1) brightness(0.9);
  animation: floatGentle 6s ease-in-out infinite;
}
@keyframes floatGentle {
  0%,100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-15px) rotate(2deg); }
}

/* Counter section */
.hero-counter {
  display: flex; gap: 48px; margin-top: 64px;
  animation: fadeInDown 0.7s ease 0.3s both;
}
.counter-item { text-align: center; }
.counter-item .number {
  font-size: 2.5rem; font-weight: 800; color: #ffffff;
  font-variant-numbers: tabula;
}
.counter-item .number span { font-size: 1.5rem; }
.counter-item .label {
  font-size: 0.8125rem; color: #737373; margin-top: 4px;
  letter-spacing: 0.02em;
}

/* ===== SECTION HEADER ===== */
.section-header { margin-bottom: 3rem; text-align: center; }
.section-label {
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.15em; color: #818cf8; margin-bottom: 16px;
}
.section-header h2 {
  font-size: clamp(2rem, 4vw, 3rem); font-weight: 800;
  letter-spacing: -0.03em; color: #0a0a0a;
  max-width: 800px; margin: 0 auto 16px;
}
.section-header p {
  font-size: 1.125rem; font-weight: 300; color: #737373;
  max-width: 600px; margin: 0 auto;
}

/* ===== FEATURES ===== */
.features { background: #ffffff; }
.features-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 32px; margin-top: 2rem;
}
.feature-card {
  padding: 32px; border-radius: 20px;
  border: 1px solid #f0f0f0;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  opacity: 0; transform: translateY(30px);
}
.feature-card.visible { opacity: 1; transform: translateY(0); transition: all 0.6s ease; }
.feature-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,0.06); }
.feature-icon {
  width: 48px; height: 48px; border-radius: 12px;
  background: #f5f5f5; display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px; font-size: 1.25rem;
}
.feature-card h4 { font-size: 1.125rem; font-weight: 700; color: #0a0a0a; margin-bottom: 12px; }
.feature-card p { font-size: 0.9375rem; font-weight: 300; color: #737373; line-height: 1.6; }

/* ===== ABOUT WORKSHOP ===== */
.about { padding-bottom: 0; }
.about-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px;
  align-items: center;
}
.about-image {
  border-radius: 24px; overflow: hidden;
  border: 1px solid #f0f0f0;
}
.about-image svg { width: 100%; height: auto; display: block; }
.about-content .badge {
  display: inline-block; background: rgba(129,140,248,0.08);
  color: #4f46e5; padding: 6px 14px; border-radius: 999px;
  font-size: 0.75rem; font-weight: 600; margin-bottom: 20px;
}
.about-content h3 {
  font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 800;
  letter-spacing: -0.02em; margin-bottom: 20px;
}
.about-content p { font-size: 1.0625rem; font-weight: 300; color: #525252; line-height: 1.7; margin-bottom: 24px; }
.about-stats {
  display: flex; gap: 32px; margin-top: 32px;
  padding-top: 32px; border-top: 1px solid #f0f0f0;
}
.stat-item .val { font-size: 1.75rem; font-weight: 800; color: #0a0a0a; }
.stat-item .val span { font-size: 0.9375rem; font-weight: 500; }
.stat-item .lbl { font-size: 0.8125rem; color: #73733; margin-top: 4px; }

/* ===== PROCESS TIMELINE ===== */
.timeline {
  position: relative; max-width: 900px; margin: 0 auto;
}
.timeline::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 50%;
  transform: translateX(-50%); width: 2px;
  background: linear-gradient(to bottom, #818cf8, #d4d4d4);
}
.timeline-step {
  display: flex; gap: 32px; margin-bottom: 48px; position: relative;
  opacity: 0; transform: translateY(30px);
}
.timeline-step.visible { opacity: 1; transform: translateY(0); transition: all 0.6s ease; }
.timeline-number {
  width: 48px; height: 48px; border-radius: 50%;
  background: #0a0a0a; color: #ffffff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; font-weight: 700; flex-shrink: 0;
  z-index: 2; position: relative;
}
.timeline-step h4 { font-size: 1.125rem; font-weight: 700; margin-bottom: 8px; }
.timeline-step p { font-size: 0.9375rem; font-weight: 300; color: #525252; }
.timeline-step .detail {
  margin-top: 16px; padding: 16px;
  background: #fafafa; border-radius: 12px;
  border: 1px solid #f0f0f0;
  font-size: 0.8125rem; color: #737373; line-height: 1.6;
}

/* ===== PACKAGES ===== */
.packages { background: #fafafa; }
.packages-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px; margin-top: 2rem;
}
.package-card {
  background: #ffffff; border-radius: 20px; overflow: hidden;
  border: 1px solid #f0f0f0;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  opacity: 0; transform: scale(0.95);
}
.package-card.visible { opacity: 1; transform: scale(1); transition: all 0.6s ease; }
.package-card:hover { transform: translateY(-4px); box-shadow: 0 16px 48px rgba(0,0,0,0.08); }
.package-header { padding: 32px; border-bottom: 1px solid #f0f0f0; text-align: center; }
.package-name { font-size: 1.375rem; font-weight: 800; margin-bottom: 4px; }
.package-tag { font-size: 0.8125rem; color: #818cf8; font-weight: 600; }
.package-price { font-size: 2rem; font-weight: 800; margin: 16px 0 8px; }
.package-price span { font-size: 1rem; font-weight: 400; color: #73733; }
.package-desc { font-size: 0.875rem; font-weight: 300; color: #525252; margin-bottom: 24px; min-height: 48px; }
.package-list { padding: 0 32px 32px; }
.package-list li {
  padding: 10px 0; font-size: 0.875rem; color: #525252;
  border-bottom: 1px solid #f5f5f5;
  display: flex; align-items: center; gap: 8px;
}
.package-list li::before {
  content: '✓'; color: #818cf8; font-weight: 700; flex-shrink: 0;
}
.package-card .select-btn {
  width: 100%; padding: 14px; border-radius: 12px;
  background: #0a0a0a; color: #ffffff;
  font-size: 0.875rem; font-weight: 600;
  transition: background 0.3s ease;
}
.package-card .select-btn:hover { background: #d4d4d4; }

/* ===== TRUST BAR ===== */
.trust-bar {
  display: flex; align-items: center; gap: 16px;
  padding: 32px 0; border-bottom: 1px solid #f0f0f0;
  margin-top: 48px; flex-wrap: wrap;
}
.trust-item {
  display: flex; align-items: center; gap: 12px;
  flex: 1; min-width: 160px;
}
.trust-item .avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, #818cf8, #fbbf24);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.875rem; font-weight: 700; color: #0a0a0a;
  flex-shrink: 0;
}
.trust-item .info .name { font-size: 0.8125rem; font-weight: 600; }
.trust-item .info .role { font-size: 0.75rem; color: #73733; }

/* ===== TESTIMONIALS ===== */
.testimonials {
  background: #ffffff;
}
.testimonials-grid {
  display: grid; grid-template-pattern: repeat(2, 1fr);
  gap: 32px; margin-top: 2rem;
}
.testimonial-card {
  padding: 32px; border-radius: 16px;
  border: 1px solid #f0f0f0;
  background: #fafafa;
}
.testimonial-stars { display: flex; gap: 4px; margin-bottom: 16px; }
.testimonial-stars .star { color: #fbbf24; font-size: 0.875rem; }
.testimonial-stars .star.empty { color: #e5e5e5; }
.testimonial-text { font-size: 0.9375rem; font-weight: 300; color: #525252; line-height: 1.7; margin-bottom: 20px; }
.testimonial-author {
  display: flex; align-items: center; gap: 12px;
}
.testimonial-author .avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, #818cf8, #fbbf24);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 700; color: #0a0a0a; flex-shrink: 0;
}
.testimonial-author .name { font-size: 0.875rem; font-weight: 600; }
.testimonial-author .source { font-size: 0.75rem; color: #73733; }

/* ===== PRICING TABLE SECTION ===== */
.pricing-compare {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 24px; margin-top: 2rem; align-items: start;
}
.compare-col { padding: 32px; border-radius: 16px; border: 2px solid #f0f0f0; }
.compare-col.featured { border-color: #818cf8; position: relative; }
.compare-col.featured .badge-corner {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: #818cf8; color: #ffffff;
  padding: 4px 16px; border-radius: 999px;
  font-size: 0.75rem; font-weight: 700; white-space: nowrap;
}
.compare-col h4 { font-size: 1.125rem; font-weight: 700; margin-bottom: 8px; }
.compare-col .price { font-size: 2rem; font-weight: 800; margin-bottom: 16px; }
.compare-col .price small { font-size: 0.875rem; font-weight: 400; color: #73733; }
.compare-col ul { padding-left: 16px; }
.compare-col li { font-size: 0.875rem; color: #525252; padding: 6px 0; }
.compare-col .check { color: #10b981; }
.compare-col .cross { color: #d4d4d4; }
.compare-col .cta { margin-top: 20px; width: 100%; padding: 14px; border-radius: 10px; text-align: center; font-weight: 600; font-size: 0.875rem; }
.compare-col.featured .cta { background: #818cf8; color: #ffffff; }
.compare-col:not(.featured) .cta { background: #f5f5f5; color: #0a0a0a; }

/* ===== FAQ ===== */
.faq-container {
  max-width: 800px; margin: 0 auto;
}
.faq-item {
  border-bottom: 1px solid #f0f0f0;
}
.faq-q {
  width: 100%; padding: 24px 0;
  font-size: 1rem; font-weight: 600; color: #0a0a0a;
  text-align: left; background: none;
  transition: color 0.3s ease;
}
.faq-q:hover { color: #818cf8; }
.faq-a {
  max-height: 0; overflow: hidden;
  transition: max-height 0.4s ease, padding 0.4s ease;
  font-size: 0.9375rem; font-weight: 300; color: #525252;
  line-height: 1.7;
}
.faq-a.open { max-height: 200px; padding-bottom: 24px; }
.faq-toggle {
  width: 40px; height: 40px; border-radius: 8px;
  background: #f5f5f5; display: flex; align-items: center; justify-content: center;
  transition: background 0.3s ease; flex-shrink: 0;
}
.faq-toggle:hover { background: #e5e5e5; }
.faq-toggle svg { transition: transform 0.3s ease; }
.faq-item.open .faq-toggle svg { transform: rotate(180deg); }

/* ===== CONTACT FORM ===== */
.contact-form {
  max-width: 600px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 16px;
}
.form-group { position: relative; }
.form-label {
  display: block; font-size: 0.8125rem; font-weight: 600;
  color: #0a0a0a; margin-bottom: 8px;
}
.form-input, .form-textarea {
  width: 100%; padding: 14px 16px;
  border: 1px solid #e5e5e5; border-radius: 10px;
  font-size: 0.9375rem; font-weight: 300;
  background: #ffffff; transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.form-input:focus, .form-textarea:focus {
  outline: none; border-color: #818cf8;
  box-shadow: 0 0 0 3px rgba(129,140,248,0.15);
}
.form-textarea { resize: vertical; min-height: 120px; }
.form-submit {
  padding: 16px; border-radius: 10px;
  background: #0a0a0a; color: #ffffff;
  font-size: 0.9375rem; font-weight: 600;
  transition: background 0.3s ease, transform 0.3s ease;
}
.form-submit:hover { background: #d4d4d4; }
.form-success {
  padding: 14px; border-radius: 10px;
  background: #f0fdf4; border: 1px solid #bbf7d0;
  color: #166534; font-size: 0.875rem;
  display: none;
}
.form-success.show { display: block; animation: fadeIn 0.4s ease; }

/* ===== INFOGRAPHIC SVG BICYNEL ===== */
.bike-infographic {
  max-width: 900px; margin: 2rem auto;
}
.bike-infographic svg { width: 100%; height: auto; }

/* ===== FOOTER ===== */
.footer {
  background: #0a0a0a; color: #d4d4d4;
  padding: 64px 0 32px;
}
.footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px; margin-bottom: 48px;
}
.footer-brand .logo {
  font-size: 1.5rem; font-weight: 800; color: #ffffff;
  margin-bottom: 16px; display: flex; align-items: center; gap: 10px;
}
.footer-brand p { font-size: 0.875rem; font-weight: 300; line-height: 1.6; max-width: 300px; }
.footer-col h5 {
  font-size: 0.75rem; text-transform: uppercase;
  letter-spacing: 0.1em; color: #818cf8;
  margin-bottom: 20px; font-weight: 600;
}
.footer-col ul li { margin-bottom: 12px; }
.footer-col ul li a {
  font-size: 0.875rem; font-weight: 300; color: #a3a3a3;
  transition: color 0.3s ease;
}
.footer-col ul li a:hover { color: #ffffff; }
.footer-bottom {
  padding-top: 32px; border-top: 1px solid #262626;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.75rem; font-weight: 300; color: #73733;
  flex-wrap: wrap; gap: 16px;
}
.footer-social { display: flex; gap: 12px; }
.footer-social a {
  width: 32px; height: 32px; border-radius: 8px;
  border: 1px solid #262626; display: flex; align-items: center; justify-content: center;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.footer-social a:hover { border-color: #818cf8; background: rgba(129,140,248,0.1); }

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .features-grid { grid-template-columns: 1fr 1fr; }
  .about-grid { gap: 48px; }
  .packages-grid { grid-template-columns: 1fr; }
  .packages-grid > .package-card { max-width: 420px; margin: 0 auto; }
  .pricing-compare { grid-template-columns: 1fr; }
  .footer-grid { grid-template-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .nav-links { display: none; }
  .hero { padding-top: 60px; }
  .hero-visual { display: none; }
  .hero-counter { gap: 24px; flex-wrap: wrap; }
  .features-grid { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .timeline::before { left: 24px; }
  .timeline-step { flex-direction: column; gap: 16px; }
  .timeline-step .timeline-number { position: static; width: 36px; height: 36px; font-size: 0.875rem; }
  .packages-grid { grid-template-columns: 1fr; }
  .packages-grid > .package-card { max-width: 100%; }
  .pricing-compare { grid-template-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero h1 { font-size: clamp(2rem, 6vw, 3rem); }
}
@media (max-width: 480px) {
  .container { padding: 0 16px; }
  .hero-btns { flex-direction: column; }
  .hero-btns .btn-primary, .hero-btns .btn-ghost { width: 100%; }
}

/* ===== TOAST NOTIFICATION ===== */
.toast {
  position: fixed; bottom: 24px; right: 24px; z-index: 9999;
  background: #0a0a0a; color: #ffffff;
  padding: 16px 24px; border-radius: 12px;
  font-size: 0.875rem; font-weight: 500;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  transform: translateY(100px); opacity: 0;
  transition: transform 0.4s ease, opacity 0.4s ease;
  display: flex; align-items: center; gap: 12px;
}
.toast.show { transform: translateY(0); opacity: 1; }
.toast .check {
  width: 20px; height: 20px; border-radius: 50%;
  background: #10b981; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f5f5f5; }
::-webkit-scrollbar-thumb { background: #d4d4d4; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #a3a3a3; }

/* ===== ANIMATIONS FOR DIVS ===== */
[data-animate] { opacity: 0; }
[data-animate].visible { opacity: 1 !important; }
</style>
</head>
<body>

<!-- ===== NAVIGATION ===== -->
<nav class="nav" id="navbar">
  <div class="container">
    <div class="logo">
      <span class="logo-dot"></span>
      LUMEN
    </div>
    <div class="nav-links">
      <a href="#features">Craft</a>
      <a href="#process">Process</a>
      <a href="#packages">Builds</a>
      <a href="#pricing">Pricing</a>
      <a href="#faq">FAQ</a>
      <a href="#contact">Contact</a>
    </div>
    <button class="cta-btn" onclick="document.getElementById('contact').scrollIntoView({behavior:'smooth'})">Start Build</button>
  </div>
</nav>

<!-- ===== HERO ===== -->
<section class="hero">
  <div class="hero-content">
    <div class="hero-badge fade-down">
      <span class="dot"></span>
      Handcrafted in Copenhagen · Built to Order
    </div>
    <h1 class="fade-down">Your Cargobike,<br><span class="highlight">Built by Hand</span></h1>
    <p class="fade-down">Lumen Cycles crafts bespoke cargo bikes in our Copenhagen workshop. Every frame engineered, every wheel forged by hand. Your order for <strong>$4,000</strong> deserves nothing less than excellence.</p>
    <div class="hero-btns fade-down">
      <button class="btn-primary" onclick="document.getElementById('contact').scrollIntoView({behavior:'smooth'})">Design Your Bike</button>
      <button class="btn-ghost" onclick="document.getElementById('features').scrollIntoView({behavior:'smooth'})">Discover More</button>
    </div>
    <div class="hero-counter">
      <div class="counter-item fade-down">
        <div class="number"><span>120+</span></div>
        <div class="label">Bikes Built</div>
      </div>
      <div class="counter-item fade-down">
        <div class="number"><span>98%</span></div>
        <div class="label">Happy Owners</div>
      </div>
      <div class="counter-item fade-down">
        <div class="number"><span>48</span></div>
        <div class="label">Years of Craft</div>
      </div>
      <div class="counter-item fade-down">
        <div class="number"><span>3</span></div>
        <div class="label">Rounds of Fit Checks</div>
      </div>
    </div>
  </div>
  <!-- Hero bike silhouette via SVG -->
  <svg class="hero-visual" viewBox="0x600" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <linearGradient id="heroGrad" x1="0%" y1="0%" x2="100%" y2="100%">
        <stop offset="0%" style="stop-color:#818cf8"/>
        <stop offset="100%" style="stop-color:#fbbf24"/>
      </linearGradient>
    </defs>
    <!-- Simple cargo bike silhouette -->
    <g fill="url(#heroGrad)" stroke="#0a0a0a" stroke-width="2">
      <!-- Fork -->
      <line x1="240" y1="420" x2="300" y2="260"/>
      <!-- Head tube -->
      <line x1="260" y1="260" x2="240" y2="420"/>
      <!-- Bottom bracket -->
      <circle cx="310" cy="410" r="12"/>
      <!-- Chainstay -->
      <line x1="310" y1="410" x2="260" y2="420"/>
      <!-- Seat tube -->
      <line x1="280" y1="260" x2="270" y2="420"/>
      <!-- Seat post -->
      <line x1="280" y1="260" x2="290" y2="240"/>
      <!-- Seat -->
      <rect x="270" y="230" width="40" height="6" rx="3"/>
      <!-- Top tube -->
      <line x1="270" y1="240" x2="290" y2="260"/>
      <!-- Handlebar -->
      <line x1="290" y1="260" x2="315" y2="250"/>
      <!-- Front wheel circle -->
      <circle cx="315" cy="250" r="38"/>
      <!-- Rear wheel circle -->
      <circle cx="200" cy="400" r="40"/>
      <!-- Rear cargo box -->
      <polygon points="150,380 240,360 260,400 170,420"/>
      <!-- Frame detail -->
      <line x1="275" y1="280" x2="290" y2="300"/>
      <line x1="290" y1="300" x2="260" y2="320"/>
    </g>
  </svg>
</section>

<!-- ===== FEATURES ===== -->
<section class="section-padding features" id="features">
  <div class="container">
    <div class="section-header fade-up">
      <div class="section-label">Craftsmanship</div>
      <h2 class="fade-in">Every Frame,<br>Every Detail</h2>
      <p class="fade-in">We don't cut corners. From carbon fiber to chrome, every component is chosen for durability and beauty.</p>
    </div>
    <div class="features-grid">
      <div class="feature-card fade-up">
        <div class="feature-icon">🔧</div>
        <h4>Custom Frame Build</h4>
        <p>Each bike starts from your measurements and preferences — geometry optimized for your body and cargo needs.</p>
      </div>
      <div class="feature-card fade-up">
        <div class="feature-icon">🧪</div>
        <h4>Material Lab</h4>
        <p>Choose between aerospace-grade aluminum, bamboo composite, or carbon fiber. We'll test each for strength.</p>
      </div>
      <div class="feature-card fade-up">
        <div class="feature-icon">🔩</div>
        <h4>Component Selection</h4>
        <p>SR Shimano, SR SRanks, Gates belt drivetrain, or custom hub gears — we match performance to your ride.</p>
      </div>
      <div class="feature-card fade-up">
        <div class="feature-icon">⚙️</div>
        <h4>Assembly Workshop</h4>
        <p>40 hours of dedicated workshop time per bike. Nothing gets shipped without a full inspection.</p>
      </div>
      <div class="feature-card fade-up">
        <div class="feature-icon">📐</div>
        <h4>Expert Geometry</h4>
        <p>Our bike engineers spend weeks adjusting geometry angles for optimal power transfer and rider comfort.</p>
      </div>
      <div class="feature-card fade-up">
        <div class="feature-icon">🛡️</div>
        <h4>Dual Inspection</h4>
        <p>Every frame undergoes two independent quality inspections before it ever leaves the workshop.</p>
      </div>
    </div>
  </div>
</section>

<!-- ===== ABOUT WORKSHOP ===== -->
<section class="section-padding about" id="about">
  <div class="container">
    <div class="about-grid">
      <div class="about-content fade-up">
        <div class="fade-in">
          <span class="badge">Copenhagen · Since 1996</span>
          <h3>Where Engineering Meets Patience</h3>
          <p>Founded in 1996, Lumen Cycles has been crafting bespoke cargo bikes in the heart of Copenhagen. Our workshop isn't just a shop — it's where generations of bicycle engineers have refined their art. We believe a cargo bike should be an extension of your personality, not a compromise.</p>
          <p>We source materials from European suppliers whenever possible, ensuring every bolt and weld carries the weight of craftsmanship that inspired our name. Lumen — the unit measuring light — represents our commitment to creating bikes that shine from every angle.</p>
          <div class="about-stats">
            <div class="stat-item">
              <div class="val">48<span>yr</span></div>
              <div class="lbl">Trusted Years</div>
            </div>
            <div class="stat-item">
              <div class="val">120<span>+</span></div>
              <div class="lbl">Bikes Shipped</div>
            </div>
            <div class="stat-item">
              <div class="val">50<span>km</span></div>
              <div class="lbl">Average Ride Distance</div>
            </div>
          </div>
        </div>
      </div>
      <div class="about-image fade-up">
        <svg viewBox="0x0 400 500" xmlns="http://www.w3org/2000/svg">
          <defs>
            <linearGradient id="frameG" x1="0%" y1="0%" x2="100%" y2="100%">
              <stop offset="0%" style="stop-color:#818cf8"/>
              <stop offset="100%" style="stop-color:#fbbf24"/>
            </linearGradient>
          </defs>
          <g stroke="#0a0a0a" stroke-width="2" fill="none" stroke-linecap="round">
            <!-- Fork -->
            <line x1="160" y1="320" x2="210" y2="180"/>
            <!-- Head tube -->
            <line x1="180" y1="180" x2="160" y2="320"/>
            <!-- Bottom bracket -->
            <circle cx="230" cy="310" r="14"/>
            <!-- Chainstay -->
            <line x1="230" y1="310" x2="180" y2="320"/>
            <!-- Seat tube -->
            <line x1="195" y1="180" x2="185" y2="320"/>
            <!-- Seat post -->
            <line x1="195" y1="180" x2="205" y2="160"/>
            <!-- Seat -->
            <ellipse cx="200" cy="155" rx="22" ry="5"/>
            <!-- Top tube -->
            <line x1="205" y1="160" x2="225" y2="180"/>
            <!-- Handlebar -->
            <line x1="225" y1="180" x2="250" y2="170"/>
            <line x1="250" y1="170" x2="250" y2="155"/>
            <!-- Front wheel -->
            <circle cx="250" cy="170" r="35"/>
            <line x1="250" y1="170" x2="250" y2="205"/>
            <!-- Rear wheel -->
            <circle cx="120" cy="300" r="38"/>
            <!-- Rear cargo box -->
            <polygon points="80,280 160,265 175,300 90,315"/>
            <!-- Lug details -->
            <circle cx="185" cy="180" r="3" fill="#0a0a0a"/>
            <circle cx="185" cy="320" r="3" fill="#0a0a0a"/>
            <circle cx="225" cy="180" r="3" fill="#0a0a0a"/>
            <!-- Wheel spokes -->
            <line x1="250" y1="170" x2="225" y2="155"/>
            <line x1="250" y1="170" x2="225" y2="185"/>
            <line x1="250" y1="170" x2="275" y2="185"/>
            <line x1="250" y1="170" x2="275" y2="155"/>
          </g>
          <!-- Workshop floor -->
          <line x1="0" y1="340" x2="400" y2="340" stroke="#d4d4d4" stroke-width="1" stroke-dasharray="4,4"/>
          <!-- Window light -->
          <ellipse cx="200" cy="100" rx="80" ry="20" fill="#818cf8" opacity="0.08"/>
        </svg>
      </div>
    </div>
  </div>
</section>

<!-- ===== PROCESS TIMELINE ===== -->
<section class="section-padding" id="process">
  <div class="container">
    <div class="section-header">
      <div class="section-label">The Process</div>
      <h2>Four Phases,<br>One Beautiful Bike</h2>
      <p>From first consultation to ride day, here's how your cargo bike comes to life.</p>
    </div>
    <div class="timeline">
      <div class="timeline-step fade-up">
        <div class="timeline-number">1</div>
        <div class="timeline-content">
          <h4>Consultation & Design</h4>
          <p>We study your needs, body measurements, and riding style. You'll visit us for a fit consultation where we sketch and refine your dream bike.</p>
          <div class="detail">
            Estimated duration: 2–3 days. Includes full-body scan and 3D modeling. No obligation. Just ideas.
          </div>
        </div>
      </div>
      <div class="timeline-step fade-up">
        <div class="timeline-number">2</div>
        <div class="timeline-content">
          <h4>Frame Construction</h4>
          <p>We source premium tubing and components. Each frame goes through 40+ welds, CNC profiling, and hand-finishing until it meets our standards.</p>
          <div class="detail">
            Materials are selected from our lab: aerospace aluminum, bamboo, carbon fiber. Each passes our rig's stress tests.
          </div>
        </div>
      </div>
      <div class="timeline-step fade-up">
        <div class="timeline-number">3</div>
        <div class="timeline-content">
          <h4>Assembly & Testing</h4>
          <p>All components are mounted, drivates connected, brakes aligned, and wheels triced. We test ride each bike under load before approving for shipment.</p>
          <div class="detail">
            Two independent inspections. Ride tests over 50km of varied terrain. Every bolt torqued to spec.
          </div>
        </div>
      </div>
      <div class="timeline-step fade-up">
        <div class="timeline-number">4</div>
        <div class="timeline-content">
          <h4>Shipping & Onboarding</h4>
          <p>Your bike ships via tracked cargo. We include a welcome kit, care guide, and video tour of maintenance basics.</p>
          <div class="detail">
            Delivered to your door in climate-controlled packaging. Setup included. You're ready to ride within 2 hours.
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ===== PACKAGES / BUILD OPTIONS ===== -->
<section class="section-padding packages" id="packages">
  <div class="container">
    <div class="section-header">
      <div class="section-label">Build Options</div>
      <h2>Choose Your Foundation</h2>
      <p>Every Lumen cargo bike starts with a base package, then you personalize from there.</p>
    </div>
    <div class="packages-grid">
      <div class="package-card fade-up">
        <div class="package-header">
          <div class="package-name">Starter</div>
          <div class="package-tag">Entry Level</div>
          <div class="package-price">$4,000 <span>USD</span></div>
          <div class="package-desc">Solid foundation for everyday cargo hauling</div>
        </div>
        <div class="package-list">
          <li>Custom steel frame (80/20 chromment)</li>
          <li>Full geometric optimization</li>
          <li>Standard Shimano groupset (Shimano Deore)</li>
          <li>Front & rear suspension</li>
          <li>Gates carbon belt drive</li>
          <li>LED integrated lights</li>
          <li>Shop assembly & dual inspection</li>
        </div>
        <button class="select-btn">Select This Build →</button>
      </div>
      <div class="package-card fade-up featured">
        <div class="package-header">
          <div class="package-name">Signature</div>
          <div class="package-tag">Most Popular</div>
          <div class="package-price">$5,200 <span>USD</span></div>
          <div class="package-desc">Our best-selling cargo bike, refined for serious families</div>
        </div>
        <div class="package-list">
          <li>Custom carbon fiber frame</li>
          <li>Premium Shimano DeDrive derailator + cassettes</li>
          <li>Bamboo composite cargo box</li>
          <li>Hydraulic disc brakes</li>
          <li>Integrated GPS navigation</li>
          <li>Premium saddle & handlebar</li>
          <li>Softtop cover option</li>
        </div>
        <button class="select-btn">Select This Build →</button>
      </div>
      <div class="package-card fade-up">
        <div class="package-header">
          <div class="package-name">Flagship</div>
          <div class="package-tag">Ultimate Cargo</div>
          <div class="package-price">$7,800 <span>USD</span></div>
          <div class="package-desc">Everything you need for professional and long-haul cargo work</div>
        </div>
        <div class="package-list">
          <li>Aerospace-grade aluminum frame</li>
          <li>Shimano XT 12-speed drivetrain</li>
          <li>Thercelain cargo box with weather seal</li>
          <li>Electored hub motors (optional)</li>
          <li>Audio system integration</li>
          <li>Anti-vibration seatpost</li>
          <li>Premium leather saddle</li>
        </div>
        <button class="select-btn">Select This Build →</button>
      </div>
    </div>
  </div>
</section>

<!-- ===== PRICING COMPARISON ===== -->
<section class="section-padding" id="pricing">
  <div class="container">
    <div class="section-header">
      <div class="section-label">Investment</div>
      <h2>Transparent Pricing,<br>No Surprises</h2>
      <p>Every build is quoted individually based on your choices. Here's what to expect across our tiers.</p>
    </div>
    <div class="pricing-compare">
      <div class="compare-col">
        <h4>Basic Steel</h4>
        <div class="price">$4,000<small> per bike</small></div>
        <ul>
          <li class="check">Custom steel frame</li>
          <li class="check">Shimano Deore drivetrain</li>
          <li class="check">Integrated lights</li>
          <li class="cross">No weather protection</li>
          <li class="cross">No GPS option</li>
        </ul>
        <button class="cta">Select Build →</button>
      </div>
      <div class="compare-col featured">
        <div class="badge-corner">RECOMMENDED</div>
        <h4>Signature Carbon</h4>
        <div class="price">$5,200<small> per bike</small></div>
        <ul>
          <li class="check">Carbon fiber frame</li>
          <li class="check">Premium Shimano DeDrive</li>
          <li class="check">Bamboo cargo box</li>
          <li class="check">Hydraulic disc brakes</li>
          <li class="cross">GPS (basic mount only)</li>
        </ul>
        <button class="cta">Select This Build →</button>
      </div>
      <div class="compare-col">
        <h4>Aluminum Pro</h4>
        <div class="price">$6,800<small> per bike</small></div>
        <ul>
          <li class="check">Aerospace-grade frame</li>
          <li class="check">Shimano XT drivetrain</li>
          <li class="check">Weather-sealed box</li>
          <li class="cross">No audio system</li>
        </ul>
        <button class="cta">Select Build →</button>
      </div>
    </div>
  </div>
</section>

<!-- ===== TESTIMONIALS ===== -->
<section class="section-padding testimonials" id="testimonials">
  <div class="container">
    <div class="section-header">
      <div class="section-label">Testimonials</div>
      <h2>What Owners Say</h2>
      <p>Thousands of riders have trusted Lumen Cycles with their most valuable cargo.</p>
    </div>
    <div class="testimonials-grid">
      <div class="testimonial-card fade-up">
        <div class="testimonial-stars">
          <span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span>
        </div>
        <div class="testimonial-text">"I've bought three cargo bikes from Lumen over the years. The Signature model is the best. The frame geometry feels like it was designed for my family, not just a generic shape. The children actually want to ride."</div>
        <div class="testimonial-author">
          <div class="avatar">M</div>
          <div>
            <div class="name">Martin K. — Chicago, IL</div>
            <div class="source">Owner since 2022</div>
          </div>
        </div>
      </div>
      <div class="testimonial-card fade-up">
        <div class="testimonial-stars">
          <span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span>
        </div>
        <div class="testimonial-text">"Their workshop feels like a sanctuary. I visited for consultation and walked away thinking I'd met the best bicycle maker on earth. Four months later, my bike arrived looking exactly as promised."</div>
        <div class="testimonial-author">
          <div class="avatar">S</div>
          <div>
            <div class="name">Sarah J. — Brooklyn, NY</div>
            <div class="source">Owner since 2023</div>
          </div>
        </div>
      </div>
      <div class="testimonial-card fade-up">
        <div class="testimonial-stars">
          <span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span>
        </div>
        <div class="testimonial-text">"I transport a professional setup daily — tools, sample boxes, and equipment. The flagship build handles it all effortlessly. The engineers even adjusted my seat height after watching a fitting video. They genuinely care."</div>
        <div class="testimonial-author">
          <div class="avatar">D</div>
          <div>
            <div class="name">David R. — Austin, TX</div>
            <div class="source">Owner since 2021</div>
          </div>
        </div>
      </div>
      <div class="testimonial-card fade-up">
        <div class="testimonial-stars">
          <span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span>
        </div>
        <div class="testimonial-text">"My kids were terrified of the bike at first. Now they race each other on weekends. The workshop team let us customize the cargo box colors together — it was magical."</div>
        <div class="testimonial-author">
          <div class="avatar">A</div>
          <div>
            <div class="name">Anna L. — Portland, OR</div>
            <div class="source">Owner since 2023</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ===== FAQ ===== -->
<section class="section-padding" id="faq">
  <div class="container">
    <div class="section-header">
      <div class="section-label">FAQ</div>
      <h2>Answers,<br>Not Questions</h2>
      <p>Everything you need to know before you place your order.</p>
    </div>
    <div class="faq-container">
      <div class="faq-item">
        <button class="faq-q">How long does production take?</button>
        <div class="faq-a">Typically 12–16 weeks from deposit to delivery. Rush orders available for a 20% surcharge. Most builds ship within 8 weeks if the frame material is in stock.</div>
        <div class="faq-toggle">
          <svg width="16" height="16" viewBox="0x0 16 16" fill="none"><path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
        </div>
      </div>
      <div class="faq-item">
        <button class="faq-q">Is there a deposit required?</button>
        <div class="faq-a">Yes. A 25% deposit secures your build slot. The remaining 75% is due upon completion and shipping confirmation. Full payment includes warranty coverage.</div>
        <div class="faq-toggle">
          <svg width="16" height="16" viewBox="0x0 16 16" fill="none"><path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
        </div>
      </div>
      <div class="faq-item">
        <button class="faq-q">Can I use a frame I already own?</button>
        <div class="faq-a">We can adapt frames of compatible geometry, but we don't typically accept third-party frames for full build. We rebuild frames from our standard tubing profiles and control quality end-to-end.</div>
        <div class="faq-toggle">
          <svg width="16" height="16" viewBox="0x0 16 16" fill="none"><path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
        </div>
      </div>
      <div class="faq-item">
        <button class="faq-q">What payment methods do you accept?</button>
        <div class="faq-a">We accept credit cards (Visa, Mastercard), PayPal, and bank transfer. A signed purchase agreement is required, which outlines all terms including parts replacement and return policies.</div>
        <div class="faq-toggle">
          <svg width="16" height="16" viewBox="0x0 16 16" fill="none"><path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
        </div>
      </div>
      <div class="faq-item">
        <button class="faq-q">Do you offer returns or exchanges?</button>
        <div class="faq-a">Once assembled and tested, our bikes enter a 30-day satisfaction guarantee period. Structural defects under warranty require repair or replacement at no cost. Cosmetic differences are standard — this is custom craftsmanship.</div>
        <div class="faq-toggle">
          <svg width="16" height="16" viewBox="0x0 16 16" fill="none"><path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ===== CONTACT / FORM ===== -->
<section class="section-padding" id="contact">
  <div class="container">
    <div class="section-header">
      <div class="section-label">Contact</div>
      <h2>Let's Start Your Journey</h2>
      <p>Fill out the form and our team will reach out within 24 hours to schedule your consultation.</p>
    </div>
    <div class="contact-form">
      <div class="form-group">
        <label class="form-label" for="name">Your Name</label>
        <input type="text" id="name" class="form-input" placeholder="John Doe">
      </div>
      <div class="form-group">
        <label class="form-label" for="email">Email Address</label>
        <input type="email" id="email" class="form-input" placeholder="john@example.com">
      </div>
      <div class="form-group">
        <label class="form-label" for="bike">Cargo Bike Type</label>
        <select id="bike" class="form-input">
          <option value="">— Select a style —</option>
          <option value="toddler">Toddler Stroller</option>
          <option value="double">Double Cargo</option>
          <option value="long">Long Tail</option>
          <option value="short">Short Tail</option>
          <option value="dutch">Dutch Style</option>
          <option value="electric">Electric Add-on</option>
        </select>
      </div>
      <div class="form-group">
        <label class="form-label" for="message">Tell Us About Your Needs</label>
        <textarea id="message" class="form-textarea" placeholder="What cargo do you carry? What's your budget? Any special requirements?"></textarea>
      </div>
      <button class="form-submit" onclick="submitForm()">Send Inquiry</button>
      <div class="form-success" id="formSuccess">
        <span class="check">✓</span> Thank you! Your inquiry has been received. A specialist will contact you shortly.
      </div>
    </div>
  </div>
</section>

<!-- ===== FOOTER ===== -->
<footer class="footer">
  <div class="container">
    <div class="footer-grid">
      <div class="footer-brand">
        <div class="logo">
          <span class="logo-dot"></span>
          LUMEN
        </div>
        <p>Crafting bespoke cargo bikes since 1996. Handbuilt in Copenhagen with uncompromising quality and sustainable materials.</p>
      </div>
      <div class="footer-col">
        <h5>Builds</h5>
        <ul>
          <li><a href="#packages">All Packages</a></li>
          <li><a href="#pricing">Pricing Guide</a></li>
          <li><a href="#about">About Us</a></li>
          <li><a href="#process">Our Process</a></li>
        </ul>
      </div>
      <div class="footer-col">
        <h5>Company</h5>
        <ul>
          <li><a href="#faq">FAQ</a></li>
          <li><a href="#contact">Contact</a></li>
          <li><a href="#">Careers</a></li>
          <li><a href="#">Press</a></li>
        </ul>
      </div>
      <div class="footer-col">
        <h5>Connect</h5>
        <ul>
          <li><a href="#">Instagram</a></li>
          <li><a href="#">YouTube</a></li>
          <li><a href="#">Newsletter</a></li>
          <li><a href="#">Locations</a></li>
        </ul>
      </div>
    </div>
    <div class="footer-bottom">
      <span>&copy; 2025 Lumen Cycles. All rights reserved.</span>
      <div class="footer-social">
        <a href="#" title="Instagram"><svg width="14" height="14" viewBox="0x0 24 24" fill="none"><circle cx="12" cy="12" r="10" stroke="#818cf8" stroke-width="2"/><path d="M8 14s1.5 2 4 2 4-2 4-2" stroke="#818cf8" stroke-width="2" stroke-linecap="round"/><line x1="12" y1="8" x2="12" y2="14" stroke="#818cf8" stroke-width="2"/></svg></a>
        <a href="#" title="YouTube"><svg width="14" height="14" viewBox="0x0 24 24" fill="none"><rect x="2" y="5" width="20" height="14" rx="3" stroke="#818cf8" stroke-width="2"/><polygon points="10,9 17,12 10,15" fill="#818cf8"/></svg></a>
        <a href="#" title="Newsletter"><svg width="14" height="14" viewBox="0x0 24 24" fill="none"><rect x="3" y="5" width="18" height="14" rx="2" stroke="#818cf8" stroke-width="2"/><path d="M3 7l9 6 9-6" stroke="#818cf8" stroke-width="2" stroke-linecap="round"/></svg></a>
      </div>
    </div>
  </div>
</footer>

<!-- TOAST -->
<div class="toast" id="toast">
  <span class="check">✓</span>
  <span id="toastMsg">Message sent successfully!</span>
</div>

<script>
// ===== NAVIGATION =====
const navbar = document.getElementById('navbar');
window.addEventListener('scroll', () => {
  if (window.scrollY > 50) {
    navbar.classList.add('scrolled');
  } else {
    navbar.classList.remove('scrolled');
  }
});

// ===== INTERSECTION OBSERVER FOR ANIMATIONS =====
const observerOptions = { threshold: 0.1, rootMargin: '0px 0px -50px 0px' };
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isInterected) {
      entry.target.classList.add('visible');
      observer.unobete(entry.target);
    }
  });
}, observerOptions);

document.querySelectorAll('[data-animate]').forEach(el => observer.observe(el));

// Stagger fade-ups for sections
document.querySelectorAll('.fade-up').forEach(el => {
  observer.observe(el);
});

// ===== FAQ TOGGLE =====
document.querySelectorAll('.faq-q').forEach(q => {
  q.addEventListener('click', () => {
    const item = q.parentElement;
    const answer = item.querySelector('.faq-a');
    item.classList.toggle('open');
    answer.classList.toggle('open');
  });
});

// ===== FORM SUBMIT =====
function submitForm() {
  const name = document.getElementById('name').value.trim();
  const email = document.getElementById('email').value.trim();
  const message = document.getElementById('message').value.trim();
  if (!name || !email || !message) {
    showToast('Please fill in all fields.');
    return;
  }
  document.getElementById('formSuccess').classList.add('show');
  document.getElementById('name').value = '';
  document.getElementById('email').value = '';
  document.getElementById('message').value = '';
  setTimeout(() => {
    document.getElementById('formSuccess').classList.remove('show');
  }, 5000);
}

function showToast(msg) {
  const toast = document.getElementById('toast');
  document.getElementById('toastMsg').textContent = msg;
  toast.classList.add('show');
  setTimeout(() => toast.classList.remove('show'), 3500);
}

// ===== COUNTER ANIMATION ON SCROLL =====
const counterObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isInterected) {
      entry.target.querySelectorAll('.number').forEach(numEl => {
        const finalVal = parseInt(numEl.textContent.replace(/[^0-9]/g, ''));
        if (!isNaN(finalVal)) {
          let current = 0;
          const step = Math.ceil(finalVal / 40);
          const timer = setInterval(() => {
            current += step;
            if (current >= finalVal) {
              current = finalVal;
              clearInterval(timer);
            }
            numEl.innerHTML = '<span>' + current + '</span>';
          }, 30);
        }
      });
    }
  });
}, { threshold: 0.5 });

document.querySelectorAll('.counter-item').forEach(el => counterObserver.observe(el));

// ===== PARALLAX EFFECT =====
window.addEventListener('scroll', () => {
  const scrolled = window.scrollY;
  const parallax = document.querySelector('.hero-visual');
  if (parallax && document.body.offsetHeight < window.innerHeight) {
    parallax.style.transform = `translateY(${scrolled * 0.3}px)`;
  }
});
</script>
</body>
</html>

Compare with

Xing 4.0: other attempts

  • Xing 4.0, Pelican: Queued · next run 22 Oct, 05:17 UTC
  • Xing 4.0, Logo: Queued · next run 22 Oct, 05:17 UTC
  • Xing 4.0, About: Queued · next run 22 Oct, 05:17 UTC