npm - cyclecad - Versions diffs - 3.10.4 → 3.12.0 - Mend

cyclecad 3.10.4 → 3.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (21) hide show

package/.github/workflows/pages.yml +34 -0
package/.nojekyll +0 -0
package/CLAUDE.md +348 -3
package/HANDOFF-2026-04-24-session-2.md +239 -0
package/HANDOFF-2026-04-24.md +90 -0
package/app/index.html +49 -10
package/app/js/modules/ai-copilot.js +195 -2
package/app/js/modules/ai-engineer.js +939 -0
package/app/js/modules/pentacad-bridge.js +216 -0
package/app/js/modules/pentacad-cam.js +184 -0
package/app/js/modules/pentacad-sim.js +215 -0
package/app/js/modules/pentacad.js +233 -0
package/app/pentacad.html +240 -0
package/cyclecad.html +1081 -0
package/explodeview.html +1102 -0
package/index-agent-first.html.bak +1306 -0
package/index.html +1683 -1240
package/machines/v2-50-chb/kinematics.json +51 -0
package/mockups/cyclecad-suite-mockup.html +1746 -0
package/package.json +1 -1
package/pentacad.html +1097 -0

package/cyclecad.html ADDED Viewed

@@ -0,0 +1,1081 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<title>cycleCAD — Parametric 3D CAD in a browser · cycleCAD Suite</title>
+<meta name="description" content="cycleCAD: parametric 3D modeller with real B-rep kernel, 13 sketch tools, 12 constraints, AI Copilot, and Agent API. MIT-licensed. No install. Part of the cycleCAD Suite." />
+<meta name="keywords" content="cycleCAD, browser CAD, parametric CAD, B-rep, OpenCascade, AI Copilot, Agent API, open source CAD, cycleCAD Suite" />
+<meta name="author" content="Sachin Kumar" />
+<link rel="canonical" href="https://cyclecad.com/cyclecad.html" />
+<meta property="og:type" content="website" />
+<meta property="og:site_name" content="cycleCAD Suite" />
+<meta property="og:title" content="cycleCAD — Parametric 3D CAD in a browser" />
+<meta property="og:description" content="Parametric CAD with real B-rep, 13 sketch tools, 12 constraints, AI Copilot, Agent API. MIT. In the browser." />
+<meta property="og:url" content="https://cyclecad.com/cyclecad.html" />
+<meta property="og:image" content="https://cyclecad.com/screenshot.png" />
+<meta name="twitter:card" content="summary_large_image" />
+<meta name="twitter:title" content="cycleCAD — Parametric 3D CAD in a browser" />
+<meta name="twitter:description" content="Parametric CAD with real B-rep, 13 sketch tools, 12 constraints, AI Copilot, Agent API. MIT. In the browser." />
+<meta name="twitter:image" content="https://cyclecad.com/screenshot.png" />
+<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>📐</text></svg>" />
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700;9..144,900&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet" />
+<style>
+/* ─────────────────────────────────────────────
+   DESIGN TOKENS — shared with suite landing
+   accent for this page: GOLD
+   ───────────────────────────────────────────── */
+:root {
+  --bg:         #0A1628;
+  --bg-alt:     #122240;
+  --bg-card:    #1A2D50;
+  --border:     #1E3A5F;
+  --border-hi:  #2A4F80;
+  --text:       #F0F0E8;
+  --text-2:     #8B9AB5;
+  --text-3:     #5A6B85;
+  --gold:       #D4A843;
+  --gold-2:     #E8C065;
+  --gold-3:     rgba(212,168,67,0.14);
+  --blue:       #2E86DE;
+  --teal:       #3AAFA9;
+  --emerald:    #10B981;
+  --emerald-2:  #34D399;
+  --emerald-3:  rgba(16,185,129,0.12);
+  --purple:     #8B6FC0;
+  --amber:      #F59E0B;
+  --red:        #EF4444;
+  --t-fast: 0.18s;
+  --t-med:  0.35s;
+  --t-slow: 0.8s;
+  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
+}
+* { margin: 0; padding: 0; box-sizing: border-box; }
+html { scroll-behavior: smooth; }
+body {
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+  font-weight: 400;
+  background: var(--bg);
+  color: var(--text);
+  line-height: 1.65;
+  overflow-x: hidden;
+  -webkit-font-smoothing: antialiased;
+}
+h1, h2, h3, h4 { font-family: 'Fraunces', Georgia, serif; font-weight: 700; line-height: 1.15; letter-spacing: -0.015em; color: var(--text); }
+em { font-style: italic; color: var(--gold-2); font-weight: 700; }
+code, pre { font-family: 'JetBrains Mono', ui-monospace, monospace; }
+.wrap { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
+/* ─────────────────────────────────────────────
+   NAV — matches suite landing
+   ───────────────────────────────────────────── */
+nav {
+  position: sticky; top: 0; z-index: 50;
+  background: rgba(10, 22, 40, 0.72);
+  backdrop-filter: blur(20px) saturate(1.5);
+  border-bottom: 1px solid var(--border);
+  padding: 16px 0;
+}
+nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
+.brand { display: inline-flex; align-items: center; gap: 10px; font-family: 'Fraunces', serif; font-weight: 700; font-size: 1.12rem; color: var(--text); text-decoration: none; }
+.brand .logo { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(135deg, var(--gold), var(--blue)); color: var(--bg); font-size: 0.9rem; }
+.brand em { color: var(--gold); font-style: italic; }
+nav .links { display: flex; align-items: center; gap: 24px; font-size: 0.95rem; }
+nav .links a { color: var(--text-2); text-decoration: none; transition: color var(--t-fast); }
+nav .links a:hover { color: var(--text); }
+nav .links a.cta {
+  background: linear-gradient(135deg, var(--gold), var(--blue));
+  color: var(--bg); padding: 8px 16px; border-radius: 24px;
+  font-weight: 600; transition: transform var(--t-fast), box-shadow var(--t-fast);
+}
+nav .links a.cta:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(212,168,67,0.32); }
+@media (max-width: 720px) { nav .links a:not(.cta) { display: none; } }
+/* ─────────────────────────────────────────────
+   HERO
+   ───────────────────────────────────────────── */
+.hero {
+  position: relative;
+  padding: 120px 0 100px;
+  background:
+    radial-gradient(ellipse 1000px 450px at 20% 0%, rgba(212,168,67,0.14), transparent 60%),
+    radial-gradient(ellipse 800px 350px at 80% 30%, rgba(46,134,222,0.1),  transparent 60%),
+    var(--bg);
+  overflow: hidden;
+}
+.hero::before {
+  content: ''; position: absolute; inset: 0;
+  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><circle cx='1' cy='1' r='0.6' fill='%232A4F80'/></svg>");
+  opacity: 0.35; pointer-events: none;
+}
+.hero .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr 1fr; gap: 72px; align-items: center; }
+.hero .kicker {
+  display: inline-flex; align-items: center; gap: 8px;
+  padding: 6px 14px; border-radius: 24px; font-size: 0.78rem; font-weight: 600;
+  color: var(--gold-2); background: var(--gold-3); border: 1px solid rgba(212,168,67,0.35);
+  letter-spacing: 0.6px; text-transform: uppercase; margin-bottom: 24px;
+}
+.hero .kicker .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold-2); animation: dotPulse 1.8s ease-in-out infinite; box-shadow: 0 0 12px var(--gold); }
+@keyframes dotPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
+.hero h1 { font-size: clamp(2.6rem, 5vw, 4.2rem); max-width: 660px; margin-bottom: 24px; font-weight: 900; }
+.hero p.lead { font-size: 1.2rem; color: var(--text-2); max-width: 620px; margin-bottom: 36px; }
+.hero .ctas { display: flex; gap: 14px; flex-wrap: wrap; }
+.btn {
+  display: inline-flex; align-items: center; gap: 10px;
+  padding: 14px 26px; border-radius: 30px; font-weight: 600; font-size: 0.98rem;
+  text-decoration: none; transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
+}
+.btn-primary { background: linear-gradient(135deg, var(--gold), var(--blue)); color: var(--bg); }
+.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(212,168,67,0.35); }
+.btn-secondary { background: transparent; color: var(--text); border: 1px solid var(--border-hi); }
+.btn-secondary:hover { background: rgba(255,255,255,0.04); border-color: var(--gold); color: var(--gold-2); }
+.btn .arrow { transition: transform var(--t-fast); }
+.btn:hover .arrow { transform: translateX(4px); }
+/* Hero visual — rotating wireframe cube with dimension lines */
+.hero-visual {
+  position: relative; aspect-ratio: 1 / 1; max-width: 440px; justify-self: end;
+  background: radial-gradient(circle at 50% 40%, rgba(212,168,67,0.08), transparent 70%);
+  border-radius: 50%;
+}
+.hero-visual svg { width: 100%; height: 100%; }
+.hero-visual .cube-spin { transform-origin: 50% 50%; animation: cubeSpin 24s linear infinite; }
+@keyframes cubeSpin { to { transform: rotate(360deg); } }
+.hero-visual .dim-line { stroke-dasharray: 3 4; animation: dimShift 10s linear infinite; }
+@keyframes dimShift { to { stroke-dashoffset: -140; } }
+.hero-visual .spark { transform-origin: 50% 50%; animation: sparkPulse 2.6s ease-in-out infinite; }
+@keyframes sparkPulse { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }
+@media (max-width: 920px) {
+  .hero { padding: 80px 0 60px; }
+  .hero .wrap { grid-template-columns: 1fr; gap: 40px; }
+  .hero-visual { max-width: 360px; justify-self: center; }
+}
+/* ─────────────────────────────────────────────
+   PROBLEM STRIP
+   ───────────────────────────────────────────── */
+.problem {
+  padding: 70px 0;
+  background: var(--bg-alt);
+  border-top: 1px solid var(--border);
+  border-bottom: 1px solid var(--border);
+}
+.problem h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); max-width: 820px; margin: 0 auto 14px; text-align: center; }
+.problem .sub { color: var(--text-2); text-align: center; max-width: 720px; margin: 0 auto 40px; }
+.problem-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
+.problem-card {
+  padding: 18px 16px; border-radius: 12px;
+  background: var(--bg); border: 1px solid var(--border);
+  text-align: center;
+}
+.problem-card .icon {
+  width: 38px; height: 38px; display: grid; place-items: center; margin: 0 auto 10px;
+  border-radius: 10px; background: rgba(239,68,68,0.12); color: var(--red); font-size: 1.2rem;
+}
+.problem-card .ttl { font-weight: 600; font-size: 0.95rem; margin-bottom: 4px; color: var(--text); }
+.problem-card .sub { font-size: 0.78rem; color: var(--text-3); margin-bottom: 0; }
+@media (max-width: 900px) { .problem-grid { grid-template-columns: repeat(3, 1fr); } .problem-card:nth-child(4), .problem-card:nth-child(5) { grid-column: span 1; } }
+@media (max-width: 560px) { .problem-grid { grid-template-columns: repeat(2, 1fr); } }
+.vs-line {
+  position: relative; margin: 40px 0 0; text-align: center;
+  font-family: 'Fraunces', serif; font-style: italic; font-size: 1.15rem; color: var(--text-2);
+}
+.vs-line::before, .vs-line::after {
+  content: ''; display: inline-block; width: 64px; height: 1px;
+  background: linear-gradient(to right, transparent, var(--border-hi));
+  vertical-align: middle; margin: 0 12px;
+}
+.vs-line::after { background: linear-gradient(to left, transparent, var(--border-hi)); }
+/* ─────────────────────────────────────────────
+   SOLUTION — five modules
+   ───────────────────────────────────────────── */
+.solution { padding: 100px 0; }
+.solution .header-block { text-align: center; max-width: 760px; margin: 0 auto 60px; }
+.section-kicker {
+  display: inline-block; font-size: 0.72rem; letter-spacing: 2.5px; text-transform: uppercase;
+  color: var(--gold-2); font-weight: 700; margin-bottom: 16px;
+}
+.solution h2 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 16px; }
+.solution p.sub { color: var(--text-2); font-size: 1.08rem; }
+.five-modules { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
+.mod-card {
+  position: relative;
+  padding: 28px 22px; border-radius: 16px;
+  background: var(--bg-alt); border: 1px solid var(--border);
+  transition: transform var(--t-med), border-color var(--t-med), box-shadow var(--t-med);
+}
+.mod-card:hover {
+  transform: translateY(-4px);
+  border-color: rgba(212,168,67,0.4);
+  box-shadow: 0 12px 32px rgba(212,168,67,0.15);
+}
+.mod-num {
+  display: inline-grid; place-items: center;
+  width: 28px; height: 28px; border-radius: 8px;
+  background: var(--gold-3); color: var(--gold-2);
+  font: 700 0.82rem 'JetBrains Mono'; margin-bottom: 14px;
+}
+.mod-card h3 { font-size: 1.05rem; font-family: 'Inter', sans-serif; font-weight: 700; margin-bottom: 8px; }
+.mod-card p { font-size: 0.88rem; color: var(--text-2); line-height: 1.55; }
+@media (max-width: 920px) { .five-modules { grid-template-columns: repeat(2, 1fr); } }
+@media (max-width: 520px) { .five-modules { grid-template-columns: 1fr; } }
+/* ─────────────────────────────────────────────
+   STRATEGIES GRID — constraints
+   ───────────────────────────────────────────── */
+.strategies { padding: 100px 0; background: var(--bg-alt); }
+.strategies .header-block { text-align: center; max-width: 700px; margin: 0 auto 50px; }
+.strategies h2 { font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 14px; }
+.strategies p.sub { color: var(--text-2); }
+.strat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
+.strat-card {
+  padding: 22px 20px; border-radius: 14px;
+  background: var(--bg); border: 1px solid var(--border);
+  transition: all var(--t-med);
+}
+.strat-card:hover { border-color: var(--gold); transform: translateY(-3px); }
+.strat-card .icon {
+  width: 40px; height: 40px; border-radius: 10px;
+  background: var(--gold-3); margin-bottom: 14px;
+  display: grid; place-items: center;
+}
+.strat-card .icon svg { width: 20px; height: 20px; stroke: var(--gold-2); stroke-width: 2; fill: none; }
+.strat-card h4 { font-size: 1rem; font-family: 'Inter', sans-serif; font-weight: 700; margin-bottom: 4px; }
+.strat-card .kind { font-size: 0.72rem; font-family: 'JetBrains Mono'; color: var(--text-3); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
+.strat-card p { font-size: 0.84rem; color: var(--text-2); line-height: 1.5; }
+@media (max-width: 920px) { .strat-grid { grid-template-columns: repeat(2, 1fr); } }
+@media (max-width: 520px) { .strat-grid { grid-template-columns: 1fr; } }
+/* ─────────────────────────────────────────────
+   B-REP SECTION — side-by-side with code sample
+   ───────────────────────────────────────────── */
+.post-section { padding: 100px 0; }
+.post-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
+.post-body h2 { font-size: clamp(1.9rem, 3.5vw, 2.6rem); margin-bottom: 16px; }
+.post-body p { color: var(--text-2); margin-bottom: 14px; font-size: 1.02rem; }
+.post-body .feature-list { list-style: none; margin-top: 26px; }
+.post-body .feature-list li {
+  position: relative; padding-left: 24px; margin-bottom: 10px;
+  color: var(--text); font-size: 0.95rem;
+}
+.post-body .feature-list li::before {
+  content: '✓'; position: absolute; left: 0; top: 0;
+  width: 16px; height: 16px; background: var(--gold-3); color: var(--gold-2);
+  border-radius: 4px; display: grid; place-items: center;
+  font-size: 0.78rem; font-weight: 700;
+}
+.post-body code.inline {
+  background: var(--bg-card); color: var(--gold-2); padding: 2px 7px; border-radius: 4px;
+  font-size: 0.88em;
+}
+.ngc-block {
+  position: relative;
+  background: var(--bg-alt);
+  border: 1px solid var(--border); border-radius: 14px;
+  overflow: hidden;
+  font-family: 'JetBrains Mono', ui-monospace, monospace;
+  font-size: 0.82rem;
+}
+.ngc-block .hd {
+  padding: 10px 16px; background: var(--bg-card);
+  border-bottom: 1px solid var(--border);
+  display: flex; align-items: center; justify-content: space-between;
+  color: var(--text-2); font-size: 0.78rem; letter-spacing: 1px; text-transform: uppercase;
+}
+.ngc-block .hd .dots { display: inline-flex; gap: 5px; }
+.ngc-block .hd .dots span { width: 9px; height: 9px; border-radius: 50%; background: var(--border-hi); }
+.ngc-block pre {
+  padding: 18px 18px 22px;
+  color: var(--text); line-height: 1.6;
+  overflow-x: auto; white-space: pre;
+}
+.ngc-block .kw  { color: var(--gold-2); }
+.ngc-block .val { color: var(--emerald-2); }
+.ngc-block .cm  { color: var(--text-3); font-style: italic; }
+.ngc-block .ax  { color: var(--blue); }
+.ngc-block .str { color: var(--teal); }
+@media (max-width: 900px) { .post-layout { grid-template-columns: 1fr; gap: 40px; } }
+/* ─────────────────────────────────────────────
+   AI COPILOT SECTION
+   ───────────────────────────────────────────── */
+.sim-section { padding: 100px 0; background: var(--bg-alt); }
+.sim-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
+.sim-layout.rev > :first-child { order: 2; }
+.sim-visual {
+  aspect-ratio: 1.1 / 1;
+  background: radial-gradient(circle at 50% 50%, rgba(212,168,67,0.08), transparent 70%);
+  border-radius: 20px; border: 1px solid var(--border);
+  position: relative; overflow: hidden;
+  padding: 22px;
+}
+.copilot-term {
+  height: 100%; width: 100%;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 14px 16px;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 0.82rem;
+  color: var(--text);
+  display: flex; flex-direction: column; gap: 6px;
+  overflow: hidden;
+}
+.copilot-term .term-hd {
+  display: flex; align-items: center; gap: 8px;
+  padding-bottom: 8px; border-bottom: 1px solid var(--border);
+  color: var(--text-3); font-size: 0.72rem; letter-spacing: 1px; text-transform: uppercase;
+}
+.copilot-term .term-hd .dots span { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--border-hi); margin-right: 4px; }
+.copilot-term .term-hd .ti { margin-left: auto; }
+.copilot-term .tin { color: var(--gold-2); }
+.copilot-term .prompt { color: var(--text); }
+.copilot-term .prompt::before { content: '> '; color: var(--gold); }
+.copilot-term .cursor { display: inline-block; width: 7px; height: 14px; background: var(--gold-2); vertical-align: middle; animation: cursorBlink 1.1s step-end infinite; margin-left: 2px; }
+@keyframes cursorBlink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
+.copilot-term .step {
+  display: flex; align-items: center; gap: 8px;
+  padding: 3px 0; opacity: 0;
+  animation: stepFade 8s ease-in-out infinite;
+}
+.copilot-term .step .chk {
+  width: 16px; height: 16px; border-radius: 50%;
+  background: var(--emerald-3); color: var(--emerald-2);
+  display: grid; place-items: center;
+  font-size: 0.72rem; font-weight: 700;
+  flex-shrink: 0;
+}
+.copilot-term .step.s1 { animation-delay: 1.1s; }
+.copilot-term .step.s2 { animation-delay: 2.0s; }
+.copilot-term .step.s3 { animation-delay: 2.9s; }
+.copilot-term .step.s4 { animation-delay: 3.8s; }
+.copilot-term .step.s5 { animation-delay: 4.7s; }
+.copilot-term .result { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); color: var(--gold-2); opacity: 0; animation: stepFade 8s ease-in-out infinite; animation-delay: 5.6s; }
+@keyframes stepFade {
+  0%, 8% { opacity: 0; transform: translateX(-6px); }
+  12%, 82% { opacity: 1; transform: translateX(0); }
+  90%, 100% { opacity: 0.9; transform: translateX(0); }
+}
+.copilot-term .kw  { color: var(--gold-2); }
+.copilot-term .val { color: var(--emerald-2); }
+.copilot-term .cm  { color: var(--text-3); font-style: italic; }
+.sim-body h2 { font-size: clamp(1.9rem, 3.5vw, 2.6rem); margin-bottom: 16px; }
+.sim-body p { color: var(--text-2); margin-bottom: 14px; font-size: 1.02rem; }
+.sim-body .feature-list { list-style: none; margin-top: 22px; }
+.sim-body .feature-list li { position: relative; padding-left: 24px; margin-bottom: 10px; font-size: 0.95rem; }
+.sim-body .feature-list li::before {
+  content: '✓'; position: absolute; left: 0; top: 0;
+  width: 16px; height: 16px; background: var(--gold-3); color: var(--gold-2);
+  border-radius: 4px; display: grid; place-items: center;
+  font-size: 0.78rem; font-weight: 700;
+}
+@media (max-width: 900px) {
+  .sim-layout { grid-template-columns: 1fr; gap: 40px; }
+  .sim-layout.rev > :first-child { order: 0; }
+}
+/* ─────────────────────────────────────────────
+   AGENT API SECTION — diagram + namespaces
+   ───────────────────────────────────────────── */
+.bridge { padding: 100px 0; }
+.bridge .header-block { text-align: center; max-width: 760px; margin: 0 auto 60px; }
+.bridge h2 { font-size: clamp(1.9rem, 3.8vw, 2.7rem); margin-bottom: 16px; }
+.bridge p.sub { color: var(--text-2); font-size: 1.05rem; }
+.bridge-diagram {
+  position: relative;
+  padding: 60px 40px;
+  border-radius: 20px;
+  background: var(--bg-alt); border: 1px solid var(--border);
+}
+.bridge-row { display: grid; grid-template-columns: 1fr 90px 1fr 90px 1fr; align-items: center; gap: 16px; }
+.bridge-node {
+  padding: 22px 18px; border-radius: 14px;
+  background: var(--bg); border: 1px solid var(--border);
+  text-align: center;
+}
+.bridge-node .icn { font-size: 1.6rem; margin-bottom: 8px; }
+.bridge-node h4 { font-size: 0.98rem; font-family: 'Inter', sans-serif; font-weight: 700; margin-bottom: 4px; }
+.bridge-node .ttag { display: inline-block; font-size: 0.72rem; font-family: 'JetBrains Mono'; color: var(--text-3); }
+.bridge-arrow { position: relative; height: 2px; background: linear-gradient(to right, var(--border-hi), var(--gold), var(--border-hi)); border-radius: 2px; }
+.bridge-arrow::after {
+  content: ''; position: absolute; right: -2px; top: 50%; transform: translateY(-50%);
+  border-left: 8px solid var(--gold); border-top: 5px solid transparent; border-bottom: 5px solid transparent;
+}
+.bridge-arrow .packet {
+  position: absolute; top: 50%; left: 0; transform: translateY(-50%);
+  width: 10px; height: 10px; border-radius: 50%; background: var(--gold);
+  box-shadow: 0 0 14px var(--gold);
+  animation: packetFly 2.2s ease-in-out infinite;
+}
+.bridge-arrow .packet.p2 { animation-delay: 0.8s; }
+@keyframes packetFly { 0% { left: 0; opacity: 0; } 10% { opacity: 1; } 80% { opacity: 1; } 100% { left: calc(100% - 10px); opacity: 0; } }
+.bridge-caption { text-align: center; margin-top: 30px; color: var(--text-2); font-size: 0.92rem; }
+.bridge-caption code { background: var(--bg-card); color: var(--gold-2); padding: 2px 7px; border-radius: 4px; font-size: 0.88em; }
+.namespaces {
+  margin-top: 36px;
+  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
+}
+.ns-chip {
+  padding: 8px 16px; border-radius: 24px;
+  background: var(--bg-card); border: 1px solid var(--border);
+  font-family: 'JetBrains Mono', monospace; font-size: 0.84rem;
+  color: var(--text);
+  transition: all var(--t-fast);
+}
+.ns-chip:hover { border-color: var(--gold); color: var(--gold-2); transform: translateY(-2px); }
+.ns-chip .ns-dot { color: var(--gold-2); }
+@media (max-width: 900px) {
+  .bridge-row { grid-template-columns: 1fr; gap: 8px; }
+  .bridge-arrow { height: 36px; width: 2px; margin: 0 auto; background: linear-gradient(to bottom, var(--border-hi), var(--gold), var(--border-hi)); }
+  .bridge-arrow::after { right: 50%; top: auto; bottom: -2px; transform: translateX(50%); border: 0; border-top: 8px solid var(--gold); border-left: 5px solid transparent; border-right: 5px solid transparent; }
+  .bridge-arrow .packet { animation: packetFlyV 2.2s ease-in-out infinite; }
+}
+@keyframes packetFlyV { 0% { top: 0; opacity: 0; } 10% { opacity: 1; } 80% { opacity: 1; } 100% { top: calc(100% - 10px); opacity: 0; } }
+/* ─────────────────────────────────────────────
+   ROADMAP — phased timeline
+   ───────────────────────────────────────────── */
+.roadmap { padding: 100px 0; background: var(--bg-alt); }
+.roadmap .header-block { text-align: center; max-width: 720px; margin: 0 auto 60px; }
+.roadmap h2 { font-size: clamp(1.9rem, 3.5vw, 2.6rem); margin-bottom: 14px; }
+.roadmap p.sub { color: var(--text-2); }
+.phases { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; position: relative; }
+.phases::before {
+  content: ''; position: absolute; top: 45px; left: 8%; right: 8%; height: 2px;
+  background: linear-gradient(to right, var(--gold), var(--amber), var(--border-hi), var(--border-hi));
+  z-index: 0;
+}
+.phase {
+  position: relative; z-index: 1;
+  padding: 24px 20px; border-radius: 14px;
+  background: var(--bg); border: 1px solid var(--border);
+}
+.phase-dot {
+  width: 18px; height: 18px; border-radius: 50%;
+  margin: 0 auto 12px; border: 3px solid var(--bg);
+  box-shadow: 0 0 0 2px var(--border-hi);
+}
+.phase.done .phase-dot   { background: var(--gold); box-shadow: 0 0 0 2px var(--gold); }
+.phase.active .phase-dot { background: var(--amber);   box-shadow: 0 0 0 2px var(--amber); animation: pulseDot 1.8s ease-in-out infinite; }
+.phase.next .phase-dot   { background: var(--bg-card); box-shadow: 0 0 0 2px var(--border-hi); }
+@keyframes pulseDot { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.22); } }
+.phase-num {
+  display: block; font-family: 'JetBrains Mono'; font-size: 0.78rem;
+  color: var(--text-3); letter-spacing: 1.5px; text-align: center; margin-bottom: 4px; text-transform: uppercase;
+}
+.phase h4 { text-align: center; font-size: 1rem; font-family: 'Inter', sans-serif; font-weight: 700; margin-bottom: 10px; }
+.phase ul { list-style: none; }
+.phase li { font-size: 0.82rem; color: var(--text-2); padding: 4px 0; border-bottom: 1px dashed var(--border); }
+.phase li:last-child { border-bottom: 0; }
+.phase.done    { border-color: rgba(212,168,67,0.35); }
+.phase.active  { border-color: rgba(245,158,11,0.4);  }
+@media (max-width: 920px) { .phases { grid-template-columns: repeat(2, 1fr); } .phases::before { display: none; } }
+@media (max-width: 520px) { .phases { grid-template-columns: 1fr; } }
+/* ─────────────────────────────────────────────
+   FINAL CTA
+   ───────────────────────────────────────────── */
+.cta-final {
+  padding: 110px 0;
+  background:
+    radial-gradient(ellipse 800px 400px at 50% 50%, rgba(212,168,67,0.14), transparent 60%),
+    var(--bg);
+  text-align: center;
+}
+.cta-final h2 { font-size: clamp(2rem, 4vw, 3rem); max-width: 780px; margin: 0 auto 16px; }
+.cta-final p { color: var(--text-2); max-width: 680px; margin: 0 auto 36px; font-size: 1.05rem; }
+.cta-final .ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
+.cta-final .tiny {
+  margin-top: 26px;
+  color: var(--text-3); font-size: 0.82rem;
+}
+.cta-final .tiny a { color: var(--text-2); text-decoration: underline; text-decoration-color: var(--border-hi); }
+.cta-final .tiny a:hover { color: var(--gold-2); }
+/* ─────────────────────────────────────────────
+   FOOTER — same as suite landing
+   ───────────────────────────────────────────── */
+footer {
+  padding: 70px 0 40px;
+  background: var(--bg-alt);
+  border-top: 1px solid var(--border);
+  font-size: 0.9rem;
+}
+footer .row {
+  display: grid; grid-template-columns: 1.8fr 1fr 1fr 1fr 1fr; gap: 40px;
+  padding-bottom: 40px; border-bottom: 1px solid var(--border);
+}
+footer .brand-col p { color: var(--text-2); font-size: 0.92rem; margin-top: 14px; max-width: 320px; }
+footer .col h4 {
+  font-size: 0.78rem; font-family: 'Inter', sans-serif; font-weight: 700;
+  text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-3); margin-bottom: 14px;
+}
+footer .col a { display: block; color: var(--text-2); text-decoration: none; padding: 4px 0; transition: color var(--t-fast); }
+footer .col a:hover { color: var(--gold-2); }
+footer .legal {
+  margin-top: 30px; display: flex; justify-content: space-between; gap: 16px;
+  color: var(--text-3); font-size: 0.82rem; flex-wrap: wrap;
+}
+@media (max-width: 900px) { footer .row { grid-template-columns: 1fr 1fr; } }
+/* ─────────────────────────────────────────────
+   SCROLL-TRIGGERED ANIMATION
+   ───────────────────────────────────────────── */
+[data-animate] { opacity: 0; transform: translateY(24px); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
+[data-animate].in-view { opacity: 1; transform: translateY(0); }
+</style>
+</head>
+<body>
+<nav>
+  <div class="wrap">
+    <a href="/" class="brand">
+      <span class="logo">⚙</span>
+      cycle<em>CAD</em> suite
+    </a>
+    <div class="links">
+      <a href="/">Suite</a>
+      <a href="/explodeview.html">ExplodeView</a>
+      <a href="/pentacad.html">Pentacad</a>
+      <a href="#features">Features</a>
+      <a href="/app/" class="cta">Launch cycleCAD →</a>
+    </div>
+  </div>
+</nav>
+<!-- HERO -->
+<header class="hero">
+  <div class="wrap">
+    <div>
+      <div class="kicker">
+        <span class="dot"></span>
+        Live · MIT · npm 3.11.0
+      </div>
+      <h1>
+        Parametric CAD that runs in a <em>browser</em>.<br/>
+        Real B-rep. No install.
+      </h1>
+      <p class="lead">
+        cycleCAD is the modelling core of the Suite. Thirteen sketch tools. Twelve constraint types.
+        Real B-rep booleans on OpenCascade.js. Assemblies with seven joint types. AI Copilot that
+        writes the geometry for you.
+      </p>
+      <div class="ctas">
+        <a href="/app/" class="btn btn-primary">Launch cycleCAD <span class="arrow">→</span></a>
+        <a href="#features" class="btn btn-secondary">See the features</a>
+      </div>
+    </div>
+    <div class="hero-visual" aria-hidden="true">
+      <svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
+        <defs>
+          <radialGradient id="cad-core" cx="50%" cy="50%">
+            <stop offset="0%" stop-color="#D4A843" stop-opacity="0.6"/>
+            <stop offset="70%" stop-color="#D4A843" stop-opacity="0.06"/>
+            <stop offset="100%" stop-color="#D4A843" stop-opacity="0"/>
+          </radialGradient>
+        </defs>
+        <!-- Outer dimension ring -->
+        <circle cx="150" cy="150" r="128" fill="none" stroke="#2A4F80" stroke-width="0.6"/>
+        <circle cx="150" cy="150" r="128" class="dim-line" fill="none" stroke="#D4A843" stroke-width="0.8" opacity="0.45"/>
+        <!-- Glow -->
+        <circle cx="150" cy="150" r="95" fill="url(#cad-core)"/>
+        <!-- Wireframe cube (isometric projection) -->
+        <g class="cube-spin">
+          <!-- back face -->
+          <polygon points="110,100 190,100 210,130 130,130" fill="none" stroke="#5A6B85" stroke-width="1" opacity="0.6"/>
+          <!-- front face -->
+          <polygon points="90,170 170,170 190,200 110,200" fill="none" stroke="#E8C065" stroke-width="1.4"/>
+          <!-- connecting edges -->
+          <line x1="110" y1="100" x2="90"  y2="170" stroke="#8B9AB5" stroke-width="1"/>
+          <line x1="190" y1="100" x2="170" y2="170" stroke="#8B9AB5" stroke-width="1"/>
+          <line x1="210" y1="130" x2="190" y2="200" stroke="#8B9AB5" stroke-width="1"/>
+          <line x1="130" y1="130" x2="110" y2="200" stroke="#8B9AB5" stroke-width="1"/>
+          <!-- top face (highlight) -->
+          <polygon points="110,100 190,100 170,170 90,170" fill="rgba(212,168,67,0.08)" stroke="#D4A843" stroke-width="1.2" opacity="0.8"/>
+          <!-- vertices -->
+          <circle cx="110" cy="100" r="2.4" fill="#E8C065"/>
+          <circle cx="190" cy="100" r="2.4" fill="#E8C065"/>
+          <circle cx="210" cy="130" r="2.4" fill="#E8C065"/>
+          <circle cx="130" cy="130" r="2.4" fill="#E8C065"/>
+          <circle cx="90"  cy="170" r="2.4" fill="#E8C065"/>
+          <circle cx="170" cy="170" r="2.4" fill="#E8C065"/>
+          <circle cx="190" cy="200" r="2.4" fill="#E8C065"/>
+          <circle cx="110" cy="200" r="2.4" fill="#E8C065"/>
+        </g>
+        <!-- Dimension lines -->
+        <g opacity="0.8">
+          <line x1="40"  y1="240" x2="260" y2="240" class="dim-line" stroke="#2E86DE" stroke-width="0.8"/>
+          <line x1="40"  y1="235" x2="40"  y2="245" stroke="#2E86DE" stroke-width="0.8"/>
+          <line x1="260" y1="235" x2="260" y2="245" stroke="#2E86DE" stroke-width="0.8"/>
+          <text x="150" y="256" font-family="JetBrains Mono" font-size="10" fill="#2E86DE" text-anchor="middle">100.00 mm</text>
+        </g>
+        <g opacity="0.8">
+          <line x1="264" y1="60"  x2="264" y2="230" class="dim-line" stroke="#3AAFA9" stroke-width="0.8"/>
+          <line x1="259" y1="60"  x2="269" y2="60"  stroke="#3AAFA9" stroke-width="0.8"/>
+          <line x1="259" y1="230" x2="269" y2="230" stroke="#3AAFA9" stroke-width="0.8"/>
+          <text x="278" y="150" font-family="JetBrains Mono" font-size="10" fill="#3AAFA9" text-anchor="middle" transform="rotate(90 278 150)">60.00 mm</text>
+        </g>
+        <!-- Axes -->
+        <g class="spark">
+          <line x1="150" y1="150" x2="200" y2="150" stroke="#EF4444" stroke-width="1.4"/>
+          <line x1="150" y1="150" x2="150" y2="100" stroke="#10B981" stroke-width="1.4"/>
+          <line x1="150" y1="150" x2="120" y2="180" stroke="#2E86DE" stroke-width="1.4"/>
+          <text x="204" y="154" font-family="JetBrains Mono" font-size="9" fill="#EF4444">X</text>
+          <text x="145" y="95"  font-family="JetBrains Mono" font-size="9" fill="#10B981">Y</text>
+          <text x="112" y="188" font-family="JetBrains Mono" font-size="9" fill="#2E86DE">Z</text>
+        </g>
+      </svg>
+    </div>
+  </div>
+</header>
+<!-- PROBLEM STRIP -->
+<section class="problem" data-animate>
+  <div class="wrap">
+    <h2>SolidWorks is <em>$4,495</em>. Fusion is $545/year. Onshape is $1,500/year.</h2>
+    <p class="sub">They all require an install, an account, a license server, and a lot of luck your machine is fast enough. You pay annually. You pay per seat. You pay whether you use it or not.</p>
+    <div class="problem-grid">
+      <div class="problem-card"><div class="icon">$$</div><div class="ttl">SolidWorks</div><div class="sub">~$4,495/yr</div></div>
+      <div class="problem-card"><div class="icon">$$</div><div class="ttl">Fusion 360</div><div class="sub">~$545/yr</div></div>
+      <div class="problem-card"><div class="icon">$$</div><div class="ttl">Onshape</div><div class="sub">~$1,500/yr</div></div>
+      <div class="problem-card"><div class="icon">$$</div><div class="ttl">CATIA</div><div class="sub">$10k+/yr</div></div>
+      <div class="problem-card"><div class="icon">$$</div><div class="ttl">Creo</div><div class="sub">~$2,400/yr</div></div>
+    </div>
+    <div class="vs-line">cycleCAD is free. Open source. In the browser.</div>
+  </div>
+</section>
+<!-- FIVE MODULES -->
+<section class="solution" id="features" data-animate>
+  <div class="wrap">
+    <div class="header-block">
+      <span class="section-kicker">The Design Workspace</span>
+      <h2>Five modules. <em>One</em> browser tab.</h2>
+      <p class="sub">cycleCAD is the modelling stage of the Suite. It goes from empty sketch to parametric assembly to exported STEP — without leaving the browser, without installing a driver, without a license server.</p>
+    </div>
+    <div class="five-modules">
+      <div class="mod-card">
+        <div class="mod-num">01</div>
+        <h3>Sketch Engine</h3>
+        <p>Thirteen sketch tools, twelve constraint types, iterative relaxation solver. Grid snap, auto-inferred constraints, degree-of-freedom analysis.</p>
+      </div>
+      <div class="mod-card">
+        <div class="mod-num">02</div>
+        <h3>Solid Modeller</h3>
+        <p>Sixteen operations: extrude, revolve, sweep, loft, fillet, chamfer, shell, pattern, hole, thread, mirror, draft, scale, combine, split, boolean.</p>
+      </div>
+      <div class="mod-card">
+        <div class="mod-num">03</div>
+        <h3>Assembly Workspace</h3>
+        <p>Seven joint types with mate constraints. Explode, collapse, interference check, contact sets, motion study. Import Inventor .iam and .ipj.</p>
+      </div>
+      <div class="mod-card">
+        <div class="mod-num">04</div>
+        <h3>AI Copilot</h3>
+        <p>Natural-language → geometry. Eight template families cover common parts; LLM planner handles everything else. Multi-step plans up to twenty steps.</p>
+      </div>
+      <div class="mod-card">
+        <div class="mod-num">05</div>
+        <h3>Agent API</h3>
+        <p>Fifty-five commands across ten namespaces. JSON-RPC surface scriptable from the browser console, MCP server, REST API, or CLI.</p>
+      </div>
+    </div>
+  </div>
+</section>
+<!-- SKETCH + CONSTRAINTS -->
+<section class="strategies" id="strategies" data-animate>
+  <div class="wrap">
+    <div class="header-block">
+      <span class="section-kicker">Sketch Engine</span>
+      <h2>Twelve constraints. <em>Real</em> solver.</h2>
+      <p class="sub">A proper iterative constraint solver — not a trick, not a cheat. Auto-infers constraints as you sketch, does degree-of-freedom analysis, and tells you when a sketch is fully defined.</p>
+    </div>
+    <div class="strat-grid">
+      <div class="strat-card">
+        <div class="icon"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M12 12 L20 4"/></svg></div>
+        <h4>Coincident</h4>
+        <div class="kind">Point · Geometric</div>
+        <p>Lock a point to another point, line, arc, or circle. The default constraint, applied on pick.</p>
+      </div>
+      <div class="strat-card">
+        <div class="icon"><svg viewBox="0 0 24 24"><path d="M3 12h18"/></svg></div>
+        <h4>Horizontal</h4>
+        <div class="kind">Line · Geometric</div>
+        <p>Force a line to align with the X axis. Applies across a chain of lines if selected together.</p>
+      </div>
+      <div class="strat-card">
+        <div class="icon"><svg viewBox="0 0 24 24"><path d="M12 3v18"/></svg></div>
+        <h4>Vertical</h4>
+        <div class="kind">Line · Geometric</div>
+        <p>Force a line to align with the Y axis. Complementary to horizontal, both can coexist in a sketch.</p>
+      </div>
+      <div class="strat-card">
+        <div class="icon"><svg viewBox="0 0 24 24"><path d="M4 7 L20 7 M4 17 L20 17"/></svg></div>
+        <h4>Parallel</h4>
+        <div class="kind">Line · Geometric</div>
+        <p>Keep two lines at the same angle without fixing that angle. The solver preserves it through edits.</p>
+      </div>
+      <div class="strat-card">
+        <div class="icon"><svg viewBox="0 0 24 24"><path d="M4 20 L20 4 M4 4 L20 20"/></svg></div>
+        <h4>Perpendicular</h4>
+        <div class="kind">Line · Geometric</div>
+        <p>Lock two lines at exactly 90°. Works with tilted sketches — the right angle is preserved.</p>
+      </div>
+      <div class="strat-card">
+        <div class="icon"><svg viewBox="0 0 24 24"><circle cx="10" cy="14" r="5"/><path d="M15 14 L22 7"/></svg></div>
+        <h4>Tangent</h4>
+        <div class="kind">Line · Arc · Circle</div>
+        <p>Touch a line or curve to an arc or circle at exactly one point. Auto-inferred on drag near a curve.</p>
+      </div>
+      <div class="strat-card">
+        <div class="icon"><svg viewBox="0 0 24 24"><path d="M4 6 L10 6 M14 6 L20 6 M4 18 L10 18 M14 18 L20 18"/></svg></div>
+        <h4>Equal</h4>
+        <div class="kind">Line · Arc</div>
+        <p>Two lines the same length, two arcs the same radius. Creates links the solver maintains.</p>
+      </div>
+      <div class="strat-card">
+        <div class="icon"><svg viewBox="0 0 24 24"><rect x="9" y="9" width="6" height="6"/><path d="M4 4 L9 9 M20 20 L15 15"/></svg></div>
+        <h4>Fixed</h4>
+        <div class="kind">Point · Ground</div>
+        <p>Pin a point to its current position. Fully defining a sketch usually starts with one fixed point.</p>
+      </div>
+      <div class="strat-card">
+        <div class="icon"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/><circle cx="12" cy="12" r="3"/></svg></div>
+        <h4>Concentric</h4>
+        <div class="kind">Arc · Circle</div>
+        <p>Lock two arcs or circles to share a centre. Classic for bolt-hole patterns and coaxial bores.</p>
+      </div>
+      <div class="strat-card">
+        <div class="icon"><svg viewBox="0 0 24 24"><path d="M12 2 L12 22 M4 8 L10 8 M14 8 L20 8 M4 16 L10 16 M14 16 L20 16"/></svg></div>
+        <h4>Symmetric</h4>
+        <div class="kind">Point · Line</div>
+        <p>Mirror two points across a reference line. Edit one side, the other follows.</p>
+      </div>
+      <div class="strat-card">
+        <div class="icon"><svg viewBox="0 0 24 24"><path d="M4 12 L20 12 M4 8 L4 16 M20 8 L20 16"/><text x="8" y="10" font-size="5" font-family="monospace" stroke="none" fill="#E8C065">42</text></svg></div>
+        <h4>Distance</h4>
+        <div class="kind">Point · Line · Dim</div>
+        <p>Fix a numeric distance between two entities. The dimension is parametric and editable.</p>
+      </div>
+      <div class="strat-card">
+        <div class="icon"><svg viewBox="0 0 24 24"><path d="M4 20 L20 20 M4 20 L12 6 M10 15 A4 4 0 0 0 14 15"/></svg></div>
+        <h4>Angle</h4>
+        <div class="kind">Line · Dim</div>
+        <p>Fix a numeric angle between two lines. Solver re-orients both to satisfy the constraint network.</p>
+      </div>
+    </div>
+  </div>
+</section>
+<!-- B-REP KERNEL -->
+<section class="post-section" data-animate>
+  <div class="wrap post-layout">
+    <div class="post-body">
+      <span class="section-kicker">B-rep Kernel</span>
+      <h2>Real B-rep. <em>Real</em> booleans.</h2>
+      <p>Under the hood cycleCAD runs OpenCascade.js — the same CAD kernel the pros use. Your extrudes, fillets, and booleans produce real topology, not mesh approximations.</p>
+      <p>Round-trip to STEP preserves the feature tree. Round-trip to IGES preserves NURBS. Round-trip to GLB gives you a tessellated mesh suitable for the web — all from the same parametric source.</p>
+      <ul class="feature-list">
+        <li>Real topology: <code class="inline">faces</code>, <code class="inline">edges</code>, <code class="inline">vertices</code>, <code class="inline">loops</code></li>
+        <li>Real booleans: <code class="inline">union</code>, <code class="inline">cut</code>, <code class="inline">intersect</code> — no mesh approximation</li>
+        <li>Real fillets and chamfers — edge-based, preserves parametric intent</li>
+        <li>STEP ↔ IGES ↔ GLB round-trip via converter server</li>
+        <li>Incremental rebuild on parameter change</li>
+      </ul>
+    </div>
+    <div class="ngc-block">
+      <div class="hd">
+        <span class="dots"><span></span><span></span><span></span></span>
+        <span>cycleCAD feature tree — live from the browser</span>
+      </div>
+<pre><span class="cm">// cycleCAD Agent API · window.cycleCAD.execute</span>
+<span class="cm">// Mounting plate with four-hole pattern</span>
+<span class="kw">const</span> plate = <span class="kw">await</span> cycleCAD.execute({
+  method: <span class="str">'sketch.rect'</span>,
+  params: { width: <span class="val">100</span>, height: <span class="val">60</span> }
+});
+<span class="kw">await</span> cycleCAD.execute({
+  method: <span class="str">'ops.extrude'</span>,
+  params: { depth: <span class="val">5</span> }
+});
+<span class="kw">const</span> holes = <span class="kw">await</span> cycleCAD.execute({
+  method: <span class="str">'ops.pattern'</span>,
+  params: { count: <span class="val">4</span>, spacingX: <span class="val">80</span> }
+});
+<span class="kw">await</span> cycleCAD.execute({
+  method: <span class="str">'export.step'</span>,
+  params: { filename: <span class="str">'plate.step'</span> }
+});
+<span class="cm">// → B-rep solid · 4 holes · STEP-ready</span></pre>
+    </div>
+  </div>
+</section>
+<!-- AI COPILOT SHOWCASE -->
+<section class="sim-section" data-animate>
+  <div class="wrap sim-layout">
+    <div class="sim-visual" aria-hidden="true">
+      <div class="copilot-term">
+        <div class="term-hd">
+          <span class="dots"><span></span><span></span><span></span></span>
+          <span>ai copilot</span>
+          <span class="ti">claude sonnet 4.6</span>
+        </div>
+        <div class="prompt"><span class="tin">draw a flange 80mm OD with 4 bolt holes</span><span class="cursor"></span></div>
+        <div class="step s1"><span class="chk">✓</span><span><span class="kw">sketch.circle</span> · Ø <span class="val">80</span></span></div>
+        <div class="step s2"><span class="chk">✓</span><span><span class="kw">ops.extrude</span> · depth <span class="val">10</span> mm</span></div>
+        <div class="step s3"><span class="chk">✓</span><span><span class="kw">sketch.circle</span> · bolt circle Ø <span class="val">60</span></span></div>
+        <div class="step s4"><span class="chk">✓</span><span><span class="kw">ops.hole</span> · <span class="val">4</span> × Ø <span class="val">8.5</span></span></div>
+        <div class="step s5"><span class="chk">✓</span><span><span class="kw">view.fit</span> · iso</span></div>
+        <div class="result">flange · 80 × 10 · 4-bolt PCD 60 · ready</div>
+      </div>
+    </div>
+    <div class="sim-body">
+      <span class="section-kicker">AI Copilot</span>
+      <h2>Type a prompt. <em>Get</em> geometry.</h2>
+      <p>Describe what you want in plain English. The Copilot parses your intent, picks the right template or asks an LLM to plan it, and executes the plan step-by-step in the scene. Every geometry operation uses the real kernel.</p>
+      <p>Common parts use offline templates — no API key needed. Novel geometry routes to a large language model that returns a plan the Copilot validates and runs.</p>
+      <ul class="feature-list">
+        <li>Eight template families: Pi cases, nuts, washers, flanges, threaded rod, gears, pulleys, bearings + housings</li>
+        <li>Plus T-slot extrusions, U-brackets, L-brackets, plates, boxes</li>
+        <li>Multi-step plans up to twenty operations with rollback</li>
+        <li>Works offline with templates — no API key required for common parts</li>
+        <li>Gemini 2.0 Flash · Groq Llama 3.3 70B · Claude Sonnet 4.6</li>
+        <li>Self-correcting: watches for errors and auto-recovers</li>
+      </ul>
+    </div>
+  </div>
+</section>
+<!-- AGENT API -->
+<section class="bridge" data-animate>
+  <div class="wrap">
+    <div class="header-block">
+      <span class="section-kicker">Agent API</span>
+      <h2>cycleCAD is for <em>agents</em>, too.</h2>
+      <p class="sub">A JSON-RPC surface covering every geometry, query, and export operation. Fifty-five commands across ten namespaces. Scripted from the browser console, the MCP server, the REST API, or the command line via <code style="color: var(--gold-2); background: var(--bg-card); padding: 2px 7px; border-radius: 4px; font-size: 0.88em;">npx cyclecad</code>.</p>
+    </div>
+    <div class="bridge-diagram">
+      <div class="bridge-row">
+        <div class="bridge-node">
+          <div class="icn">🤖</div>
+          <h4>Agent</h4>
+          <div class="ttag">Any LLM or script</div>
+        </div>
+        <div class="bridge-arrow"><div class="packet"></div><div class="packet p2"></div></div>
+        <div class="bridge-node">
+          <div class="icn">🔌</div>
+          <h4>cycleCAD API</h4>
+          <div class="ttag">JSON-RPC · 55 commands</div>
+        </div>
+        <div class="bridge-arrow"><div class="packet"></div><div class="packet p2"></div></div>
+        <div class="bridge-node">
+          <div class="icn">📐</div>
+          <h4>3D Scene</h4>
+          <div class="ttag">B-rep · Three.js · live</div>
+        </div>
+      </div>
+      <div class="bridge-caption">
+        Call <code>window.cycleCAD.execute({ method, params })</code>. Self-describing schema via <code>getSchema()</code>.
+      </div>
+      <div class="namespaces">
+        <span class="ns-chip"><span class="ns-dot">●</span> sketch.<span class="ns-dot">*</span></span>
+        <span class="ns-chip"><span class="ns-dot">●</span> ops.<span class="ns-dot">*</span></span>
+        <span class="ns-chip"><span class="ns-dot">●</span> assembly.<span class="ns-dot">*</span></span>
+        <span class="ns-chip"><span class="ns-dot">●</span> view.<span class="ns-dot">*</span></span>
+        <span class="ns-chip"><span class="ns-dot">●</span> query.<span class="ns-dot">*</span></span>
+        <span class="ns-chip"><span class="ns-dot">●</span> validate.<span class="ns-dot">*</span></span>
+        <span class="ns-chip"><span class="ns-dot">●</span> export.<span class="ns-dot">*</span></span>
+        <span class="ns-chip"><span class="ns-dot">●</span> import.<span class="ns-dot">*</span></span>
+        <span class="ns-chip"><span class="ns-dot">●</span> render.<span class="ns-dot">*</span></span>
+        <span class="ns-chip"><span class="ns-dot">●</span> file.<span class="ns-dot">*</span></span>
+      </div>
+    </div>
+  </div>
+</section>
+<!-- ROADMAP -->
+<section class="roadmap" data-animate>
+  <div class="wrap">
+    <div class="header-block">
+      <span class="section-kicker">Roadmap</span>
+      <h2>Phased. <em>Honest</em> about where we are.</h2>
+      <p class="sub">The core is shipped and running in production. Engineering analysis is the active sprint. Real-time collaboration and a plugin marketplace are on deck.</p>
+    </div>
+    <div class="phases">
+      <div class="phase done">
+        <div class="phase-dot"></div>
+        <span class="phase-num">Done</span>
+        <h4>Phase 0 · Core</h4>
+        <ul>
+          <li>Browser-native UI</li>
+          <li>45 modules</li>
+          <li>138 MB STEP import</li>
+          <li>AI Copilot core</li>
+          <li>Agent API · 55 commands</li>
+          <li>MCP server · REST API · CLI</li>
+        </ul>
+      </div>
+      <div class="phase active">
+        <div class="phase-dot"></div>
+        <span class="phase-num">In progress</span>
+        <h4>Phase 1 · Engineering Analyst</h4>
+        <ul>
+          <li>Bolted-joint analysis ✓</li>
+          <li>Gear (AGMA bending + pitting)</li>
+          <li>Shaft (Goodman / Soderberg)</li>
+          <li>Bearings (L10 life)</li>
+          <li>Welds (throat stress)</li>
+        </ul>
+      </div>
+      <div class="phase next">
+        <div class="phase-dot"></div>
+        <span class="phase-num">Next</span>
+        <h4>Phase 2 · Intelligence</h4>
+        <ul>
+          <li>Text-to-CAD live preview</li>
+          <li>Photo-to-CAD reverse engineering</li>
+          <li>DFM checker</li>
+          <li>Generative design</li>
+          <li>RAG-cited engineering references</li>
+        </ul>
+      </div>
+      <div class="phase next">
+        <div class="phase-dot"></div>
+        <span class="phase-num">Later</span>
+        <h4>Phase 3 · Platform</h4>
+        <ul>
+          <li>Real-time collaboration</li>
+          <li>Plugin marketplace</li>
+          <li>Cloud storage</li>
+          <li>Enterprise SSO</li>
+          <li>Self-hosted enterprise builds</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</section>
+<!-- FINAL CTA -->
+<section class="cta-final">
+  <div class="wrap">
+    <h2>Ship models. <em>Not</em> licence-server tickets.</h2>
+    <p>Open cycleCAD in the browser. Start a sketch. Extrude, fillet, assemble. Export STEP. No install. No account. MIT-licensed, forever.</p>
+    <div class="ctas">
+      <a href="/app/" class="btn btn-primary">Launch cycleCAD <span class="arrow">→</span></a>
+      <a href="https://github.com/vvlars-cmd/cyclecad" class="btn btn-secondary">View on GitHub</a>
+      <a href="https://www.npmjs.com/package/cyclecad" class="btn btn-secondary">View on npm</a>
+    </div>
+    <div class="tiny">
+      cycleCAD is <strong>MIT</strong>-licensed. Part of the <a href="/">cycleCAD Suite</a>.
+    </div>
+  </div>
+</section>
+<!-- FOOTER -->
+<footer>
+  <div class="wrap">
+    <div class="row">
+      <div class="col brand-col">
+        <span class="brand">cycle<em>CAD</em> suite</span>
+        <p>From idea to finished part, in one browser tab. Open-source CAD for designers, makers, and CNC shops.</p>
+      </div>
+      <div class="col">
+        <h4>Products</h4>
+        <a href="/app/">cycleCAD</a>
+        <a href="https://explodeview.com/">ExplodeView</a>
+        <a href="/pentacad.html">Pentacad</a>
+      </div>
+      <div class="col">
+        <h4>Resources</h4>
+        <a href="https://github.com/vvlars-cmd/cyclecad#readme">Documentation</a>
+        <a href="https://github.com/vvlars-cmd/cyclecad/blob/main/cycleCAD-Architecture.pptx">Architecture</a>
+        <a href="https://github.com/vvlars-cmd/cyclecad/blob/main/docs/API-REFERENCE.md">API reference</a>
+      </div>
+      <div class="col">
+        <h4>Developers</h4>
+        <a href="https://github.com/vvlars-cmd/cyclecad">GitHub</a>
+        <a href="https://www.npmjs.com/package/cyclecad">npm</a>
+        <a href="https://github.com/vvlars-cmd/cyclecad/blob/main/server/mcp-server.js">MCP server</a>
+      </div>
+      <div class="col">
+        <h4>Contact</h4>
+        <a href="mailto:sachin.kumar@cyclewash.com">Email</a>
+        <a href="https://cyclewash.de/en">cycleWASH</a>
+      </div>
+    </div>
+    <div class="legal">
+      <span>© 2026 cycleCAD Suite · Sachin Kumar</span>
+      <span>cycleCAD MIT · ExplodeView MIT · Pentacad AGPL-3.0</span>
+    </div>
+  </div>
+</footer>
+<script>
+(() => {
+  const els = document.querySelectorAll('[data-animate]');
+  const obs = new IntersectionObserver((entries) => {
+    entries.forEach((e) => {
+      if (e.isIntersecting) {
+        e.target.classList.add('in-view');
+        obs.unobserve(e.target);
+      }
+    });
+  }, { threshold: 0.12 });
+  els.forEach((el) => obs.observe(el));
+})();
+</script>
+</body>
+</html>